js 实现三级联动

JavaScript是现代互联网开发不可或缺的技术之一，它与网页设计紧密结合，常常用来实现网页的动态交互功能。其中三级联动是比较常见的功能，比如实现省、市、区的联动选择。实现三级联动的核心是使用JavaScript根据用户的选择动态生成选项，下面将通过举例说明如何实现一个省、市、区的三级联动选择。

首先，需要在页面中添加三个下拉框，分别对应省、市、区，如下所示：

<select name="province" id="province">
<option value=""></option>
<option value="北京市">北京市</option>
<option value="上海市">上海市</option>
<option value="广东省">广东省</option>
</select>
<select name="city" id="city">
<option value=""></option>
</select>
<select name="area" id="area">
<option value=""></option>
</select>

上面代码中，省级下拉框中包含了三个省份供用户选择，而后两个下拉框暂不包含任何选项。

接下来，需要写js代码来实现三级联动。首先，给省级下拉框绑定change事件：

let province = document.getElementById('province');
province.onchange = function() {
// 动态生成市级选项
}

当用户选择省份时，上面的代码会触发change事件，接下来需要根据选择的省份动态生成市级选项。下面是实现动态生成市级选项的代码：

let province = document.getElementById('province');
let city = document.getElementById('city');
province.onchange = function() {
city.innerHTML = '';
let options = [];
if (province.value === '北京市') {
options = ['东城区', '西城区', '朝阳区', '海淀区', '丰台区', '门头沟区'];
} else if (province.value === '上海市') {
options = ['黄浦区', '卢湾区', '静安区', '徐汇区', '长宁区', '普陀区'];
} else if (province.value === '广东省') {
options = ['广州市', '深圳市', '珠海市', '汕头市', '韶关市', '佛山市'];
}
for (var i = 0; i < options.length; i++) {
lrt option = document.createElement('option');
option.value = options[i];
option.text = options[i];
city.add(option);
}
}

上面的代码首先清空了市级选项，然后根据用户选择的省份动态生成市级选项，最后将生成的选项添加到市级下拉框中。

最后，需要根据用户选择的市级选项动态生成区级选项。下面是实现动态生成区级选项的代码：

let province = document.getElementById('province');
let city = document.getElementById('city');
let area = document.getElementById('area');
province.onchange = function() {
city.innerHTML = '';
area.innerHTML = '';
let cityOptions = [];
if (province.value === '北京市') {
cityOptions = ['东城区', '西城区', '朝阳区', '海淀区', '丰台区', '门头沟区'];
} else if (province.value === '上海市') {
cityOptions = ['黄浦区', '卢湾区', '静安区', '徐汇区', '长宁区', '普陀区'];
} else if (province.value === '广东省') {
cityOptions = ['广州市', '深圳市', '珠海市', '汕头市', '韶关市', '佛山市'];
}
for (var i = 0; i < cityOptions.length; i++) {
let option = document.createElement('option');
option.value = cityOptions[i];
option.text = cityOptions[i];
city.add(option);
}
area.innerHTML = '';
};
city.onchange = function() {
area.innerHTML = '';
let areaOptions = [];
if (city.value === '东城区') {
areaOptions = ['交道口街道', '东华门街道', '景山街道', '东四街道', '东直门街道'];
} else if (city.value === '西城区') {
areaOptions = ['德胜街道', '什刹海街道', '西长安街街道', '广安门街道', '白纸坊街道'];
} else if (city.value === '朝阳区') {
areaOptions = ['三里屯街道', '麦子店街道', '亚运村街道', '大屯街道', '工体街道'];
}
for (var i = 0; i < areaOptions.length; i++) {
let option = document.createElement('option');
option.value = areaOptions[i];
option.text = areaOptions[i];
area.add(option);
}
};

上面的代码首先清空了区级选项，然后根据用户选择的市级选项动态生成区级选项，最后将生成的选项添加到区级下拉框中。

至此，一个省、市、区的三级联动选择就实现了。