聊聊如何使用Js写一个简单的二级联动和三级联动呢？

您所在的位置：网站首页 › 网页下拉不了 › 聊聊如何使用Js写一个简单的二级联动和三级联动呢？

聊聊如何使用Js写一个简单的二级联动和三级联动呢？

2023-06-01 15:27| 来源: 网络整理| 查看: 265

前言：咳咳哈，大佬说："这不是有手就行了？"好吧，这里不做过多罗里吧嗦，真的不过多吹，我们在下面直接上代码上注释。

文章目录：原Js二级联动实现原Js三级联动实现

一、二级联动的实现第一步

在HTML页面创建两个 select 下拉列表元素，并设置id为 ‘province’和id ‘city’

请选择第二步

在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创建三个下拉列表

请选择请选择第二

和上面一样在html创建标签，然后创建 JavaScript 对象字面量

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城市数据到option for (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; 总结:

js的二级联动和三级联动，有很多种写法，我这种写法只是多种写法中的一种，我个人认为是比较简洁的一种；上面的这些代码多练习几遍也就会写了，也不用死记硬背，理解就好了！实在怕忘记就一键三连吧！哈哈！

【本文地址】

聊聊如何使用Js写一个简单的二级联动和三级联动呢？

聊聊如何使用Js写一个简单的二级联动和三级联动呢？

今日新闻

推荐新闻