本篇文章给大家带来《js三级联动代码》，石家庄人才网对文章内容进行了深度展开说明，希望对各位有所帮助，记得收藏本站。

在Web开发中，我们经常会遇到需要使用三级联动菜单的情况，例如选择省市区。这时，我们可以使用JavaScript来实现这个功能。下面就来介绍一下如何使用JS编写三级联动代码。

首先，我们需要准备三个下拉菜单，分别代表省、市、区。然后，我们需要准备一个数据源，用来存储省市区的数据。数据源可以是一个数组，也可以是一个JSON对象。这里我们以JSON对象为例：

```jsonvar data = { "北京市": { "北京市": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"], }, "天津市": { "天津市": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "宁河区", "静海区", "蓟州区"], }, // ...其他省市区数据};```

接下来，我们需要编写JavaScript代码来实现联动效果。代码如下：

```javascript// 获取三个下拉菜单元素var provinceSelect = document.getElementById("province");var citySelect = document.getElementById("city");var areaSelect = document.getElementById("area");// 初始化省份下拉菜单for (var province in data) { var option = document.createElement("option"); option.value = province; option.text = province; provinceSelect.appendChild(option);}// 省份下拉菜单改变事件provinceSelect.onchange = function () { // 清空市、区下拉菜单 citySelect.innerHTML = ""; areaSelect.innerHTML = ""; // 获取选中的省份 var selectedProvince = this.value; // 获取对应省份的城市数据 var cities = data[selectedProvince]; // 初始化城市下拉菜单 for (var city in cities) { var option = document.createElement("option"); option.value = city; option.text = city; citySelect.appendChild(option); } // 触发一次城市下拉菜单改变事件，初始化区域下拉菜单 citySelect.onchange();};// 城市下拉菜单改变事件citySelect.onchange = function () { // 清空区域下拉菜单 areaSelect.innerHTML = ""; // 获取选中的省份和城市 var selectedProvince = provinceSelect.value; var selectedCity = this.value; // 获取对应城市区域数据 var areas = data[selectedProvince][selectedCity]; // 初始化区域下拉菜单 for (var i = 0; i < areas.length; i++) { var option = document.createElement("option"); option.value = areas[i]; option.text = areas[i]; areaSelect.appendChild(option); }};// 初始化时默认选中第一个省份，并触发一次省份下拉菜单改变事件provinceSelect.selectedIndex = 0;provinceSelect.onchange();```

石家庄人才网小编提醒您，代码中，我们首先获取了三个下拉菜单元素，并使用JSON数据初始化了省份下拉菜单。然后，我们分别为省份和城市下拉菜单绑定了改变事件。当省份下拉菜单改变时，我们会根据选中的省份更新城市下拉菜单，并触发一次城市下拉菜单改变事件，以初始化区域下拉菜单。最后，我们在页面加载完成后，默认选中第一个省份，并触发一次省份下拉菜单改变事件，以初始化整个三级联动菜单。