当前位置：首页 > news >正文

Js写的二级联动和三级联动

news 2025/6/26 20:05:20

二级联动的实现
第一步
在HTML页面创建两个 select 下拉列表元素，并设置id为 ‘province’和id ‘city’

<!--省份-->
<select id="province" onchange="getCity()"></select><!--城市-->  
<select id="city"><option>请选择</option>
</select>

第二步
在HTML创建js标签用于写js代码,当然也可以创建一个js文本写js代码，我这里纯属是想偷懒所以直接在html页面使用script标签里面写，效果一样；

好了，不啰嗦，现在开始写js代码

首先我们要创建 javaScript 对象字面量，它是[object literal]的一种形式；是用来创建包含键值对的对象，可以快速地创建和初始化一个对象，不再需要定义一个构造函数！

//省市对应数据
var data = {"北京市": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区"],"上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区"],"广东省": ["深圳市", "广州市", "珠海市", "中山市", "东莞市"]
};

接下来就是for(var key in data)初始化省份

getElementById("xxx") 获取id
createElement("xxx") 创建一个html元素节点

   //初始化省份var province = document.getElementById("province");for (var key in data) {var option = document.createElement("option");option.innerText = key;province.appendChild(option);}

创建函数获取城市

//获取城市function getCity() {var provinceName = province.value;var city = document.getElementById("city");city.innerHTML = "";if (data[provinceName]) {for (var i = 0; i < data[provinceName].length; i++) {var option = document.createElement("option");option.innerText = data[provinceName][i];city.appendChild(option);}}}

写到这里，二级联动也就写完了

三级联动的实现
三级联动的实现要比二级联动实现复杂了一点点，但是，并不算难！

第一
老套路，和上面二级联动一样，先在HTML创建三个下拉列表

  <select id="province"></select><select id="city"><option>请选择</option></select><select id="district"><option>请选择</option></select>

第二
和上面一样在html创建

var data = {"广东省": {"珠海市": ["香洲区", "斗门区"],"广州": ["番禺", "黄埔"]},"仙侠世界": {"玄幻大陆": ["无敌区", "无人区"],"科技大陆": ["天才区", "学士区"]}
};

1)接下来就是for(var key in data)初始化省份

// 获取省份列表
var province = document.getElementById("province");
for (var key in data) {var option = document.createElement("option");option.text = key;province.add(option);

2)根据省份获取城市列表

// 根据省份获取城市列表
function getCity() {var city = document.getElementById("city");var district = document.getElementById("district");//城市为0，当选择了省份的时候才有数据city.options.length = 0;var selectedProvince = province.options[province.selectedIndex].text;//循环遍历data城市数据到optionfor (var key in data[selectedProvince]) {var option = document.createElement("option");option.text = key;//添加数据city.add(option);}
}

3)根据城市获取区县列表

// 根据城市获取区县列表
function getDistrict() {var district = document.getElementById("district");//区县为0，当选择了城市的时候才有数据district.options.length = 0;//获取城市var selectedProvince = province.options[province.selectedIndex].text;//获取区县var selectedCity = city.options[city.selectedIndex].text;//循环遍历for (var i = 0; i < data[selectedProvince][selectedCity].length; i++) {var option = document.createElement("option");option.text = data[selectedProvince][selectedCity][i];district.add(option);}
}// 函数绑定到省份和城市下拉框的 onchange 事件上
//县列表以便在用户选择不同的省份或城市时自动更新城市和区
province.onchange = getCity;
city.onchange = getDistrict;