联动就是当用户选择前一个下拉选框中的内容，后一个下拉选框中的选项会根据前一个下拉选框的内容做出相应的改变。
这次的栗子举的是：省和市的联动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市联动</title>
<style type="text/css">
*{margin: 0; padding: 0;}
#div1 {
width: 600px;
height: 200px;
border: 1px solid black;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
text-align: center;
line-height: 200px;
font-size: 20px;
}
#div1 select {
font-size: 20px;
}
</style>
</head>
<body>
<div id="div1">
省：<select name="province" id="province">
<option value="">--请选择--</option>
</select>
市：<select name="city" id="city">
<option value="">--请选择--</option>
</select>
</div>
<script type="text/javascript">
//初始化数据：数组里面存放"省"对象,省对象有id,name属性和citys数组，citys数组里存放市级对象，市级对象有id，name属性
let region = [
{
id: 10000,
name: '安徽省',
citys: [
{
id: 10001,
name: '合肥市'
},
{
id: 10002,
name: '淮南市'
},
{
id: 10003,
name: '黄山市'
}
]
},
{
id: 20000,
name: '湖南省',
citys: [
{
id: 20001,
name: '长沙市'
},
{
id: 20002,
name: '株洲市'
},
{
id: 20003,
name: '怀化市'
}
]
}
]
let proSelect = document.getElementById("province"); //获得省的下拉选框对象
let citySelect = document.getElementById("city"); //获得市的下拉选框对象
// 初始化显示省级数据
for (let p of region) { //使用for of 遍历数组region
let option = document.createElement('option'); //创建option元素
option.innerText = p.name; //给option元素添加innerText
option.value = p.id; //设置option元素设置value值
proSelect.appendChild(option); //将option元素追加到省的下拉选框中
}
// 省级数据改变事件:当选中省时，在市的下拉选框中对应显示该省下的市
proSelect.onchange = function() {
citySelect.innerHTML = '<option value="">--请选择--</option>'; //将市的下拉选框中的值清空
for (let p of region) { //遍历数组region
if (p.id == proSelect.value) { //当循环变量p的id和已经选择的省的value值相等时
for (let c of p.citys) {
let option = document.createElement('option');
option.innerText = c.name;
option.value = c.id;
citySelect.appendChild(option);
}
}
}
}
// 当选择完市之后，弹出选中的数据
citySelect.onchange = function() {
alert(proSelect.value+citySelect.value);
}
</script>
</body>
</html>代码介绍：
1.在html的body中创建两个select下拉选框，并给他们一个id值用来选择到该元素。
2.数据准备：在JavaScript代码区域创建一个数组region,数组中存储市级对象，对象有id，name和citys数组这些属性。citys数组中存放该省的下辖市对象，下辖市对象有id和name属性。
3.往省级下拉选框中填入数据：遍历region数组，创建option元素，给元素添加文本值和value值，然后追加到省级下拉选框中。
4.设置省级下拉选框值改变事件：先把市级下拉选框中的值清空（防止多次选择省级下拉选框中的值使得市级下拉选框中的值紊乱），遍历region数组，找到id值与下拉选框value值相等的元素，遍历该元素中的citys数组，创建option元素，给元素田家庵文本值和value值，然后追加到市级下拉选框中。
5.测试选择结果：给市级下拉选框加一个值改变事件，当改变市级下拉选框中的值后，弹窗显示省级下拉选框的value值和市级下拉选框的value值。
截图：
1.初始状态
2.状态1
3.状态2
