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); } };
上面的代码首先清空了区级选项，然后根据用户选择的市级选项动态生成区级选项，最后将生成的选项添加到区级下拉框中。
至此，一个省、市、区的三级联动选择就实现了。
