关于select下拉框的操作，参考：https://www.imooc.com/article/10487

多级联动：有三个下拉框，在你选择第一个下拉框后自动根据第一个的内容去生成第二个下拉框的内容，第三个下拉框的内容同样如此，注意是自动的，意思是：在选择第一个下拉框的时候第二个和第三个框的值是同时改变的

针对第一个下拉框一般的做法是在页面加载时就将内容进行初始化填充进去

用原生JS实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><select name="Province" id="Province"><option>--选择省--</option></select><select name="city" id="city"><option>--选择市--</option></select><select name="Area" id="Area"><option>--选择区--</option></select></body><script type="text/javascript">//当页面加载时就将省的数据添加到选择省的下拉框中window.onload = function(){debugger//省的数据var ProvinceArray = ["湖北省","河北省","江苏省"," 浙江省","四川省"];for(let i = 0; i < ProvinceArray.length; i++){//第一个属性代表标签内的内容，第二个代表value值let opt = new Option(ProvinceArray[i],ProvinceArray[i]);document.getElementById("Province").options.add(opt)}}</script>
</html>

后面的下拉框就根据前面的值进行初始化即可

全部测试代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><select name="Province" id="Province" ><option hidden>--选择省--</option></select><select name="city" id="city"><option hidden>--选择市--</option></select><select name="Area" id="Area"><option hidden>--选择区--</option></select></body><script type="text/javascript">//当页面加载完成后执行的内容window.onload = function(){//省的数据var ProvinceArray = ["湖北省","河北省","江苏省","浙江省","四川省"];//对应每个省的市的数据var cityArray = [['武汉市','黄冈市','咸宁市','宜昌市','随州市'],['唐山市','邢台市','保定市','衡水市','沧州市'],['南京市','徐州市','苏州市','南通市','扬州市'],['杭州市','宁波市','温州市','绍兴市','金华市'],['成都市','眉山市','德阳市','绵阳市','广元市'],];//这里就只写每个省对应的第一个市的区信息吧  数据量表小了 但是思路是一样的var AreaArray = [['蔡甸区','洪山区','汉阳区','武昌区','东西湖区'],['路南区','路北区','丰南区','开平区','丰润区'],['玄武区','浦口区','江宁区','鼓楼区','雨花台区'],['上城区','西湖区','萧山区','余杭区','富阳区'],['锦江区','武侯区','双流区','温江区','成华区'],];//将省的数据添加到选择省的下拉框中for(let i = 0; i < ProvinceArray.length; i++){//第一个属性代表标签内的内容，第二个代表value值let opt = new Option(ProvinceArray[i],ProvinceArray[i]);document.getElementById("Province").options.add(opt)}//根据第一个下拉框的值初始化第二个和第三个下拉框的内容document.getElementById("Province").onchange = function(){//清除第二个下拉框中前面的初始化内容document.getElementById("city").options.length= 0//清除第三个下拉框中前面的初始化内容document.getElementById("Area").options.length= 0//如果当前第二个下拉框的值为//cityArray的下标let citArrayindex = -1;switch(this.value){case '湖北省': citArrayindex = 0; break;case '河北省': citArrayindex = 1; break;case '江苏省': citArrayindex = 2; break;case '浙江省': citArrayindex = 3; break;case '四川省': citArrayindex = 4; break;//当没有选择时默认是 "选择市" 注意这里用的是set方法 不是add 不然会出现两个 --选择市-- 下面的区同样如此default: document.getElementById("city").options.set(new Option("--选择市--"));break;}if(citArrayindex != -1){//初始化第二个框中的内容for(let i = 0; i < cityArray[citArrayindex].length; i++){//第一个属性代表标签内的内容，第二个代表value值let opt = new Option(cityArray[citArrayindex][i],cityArray[citArrayindex][i]);document.getElementById("city").options.add(opt)}//初始化第三个框中的内容for(let i = 0; i < AreaArray[citArrayindex].length; i++){//第一个属性代表标签内的内容，第二个代表value值let opt = new Option(AreaArray[citArrayindex][i],AreaArray[citArrayindex][i]);document.getElementById("Area").options.add(opt)}}}//根据第二个下拉框的值初始化第三个下拉框的内容document.getElementById("city").onchange = function(){//清除第三个下拉框中前面的初始化内容document.getElementById("Area").options.length= 0//cityArray的下标let AreaArrayindex = -1;switch(this.value){case '武汉市': AreaArrayindex = 0; break;case '唐山市': AreaArrayindex = 1; break;case '南京市': AreaArrayindex = 2; break;case '杭州市': AreaArrayindex = 3; break;case '成都市': AreaArrayindex = 4; break;//当没有选择时默认是 "请选择区“default: document.getElementById("Area").options.set(new Option("--选择区--"));break;}if(AreaArrayindex != -1){//初始化第三个框的内容for(let i = 0; i < AreaArray[AreaArrayindex].length; i++){//第一个属性代表标签内的内容，第二个代表value值let opt = new Option(AreaArray[AreaArrayindex][i],AreaArray[AreaArrayindex][i]);document.getElementById("Area").options.add(opt)}}}}</script>
</html>

原生JS实现多级联动相关推荐

原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
原生JS写三级联动 --省--市--区
效果如下: css代码 <style>select{width: 100px;height: 30px;} </style> html代码 <div id="b ...
插件原生js 省市区三级联动源码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
原生js实现三级联动
学习自于 http://blog.csdn.net/Elenal/article/details/51493510 <!DOCTYPE html> <html lang=&quo ...
原生js省市区三级联动
html模板 <form class="mainLeft" onsubmit="formSubmit(event)"><select id=& ...
多级联动下拉菜单插件：jquery.cxselect.js
话说这个插件,我也用了挺久了,但一直对其具体的作用不是很懂,只知道可以利用 ajax来请求数据,实现类似于多级联动的效果.后来百度了下,在此做个总结吧. 下面是以一名php程序员的角度来分析的...可 ...
原生js实现地址选择组件（三级联动）
1.实现效果 2.实现步骤首先引入地址json数据,省市区,三级联动,该demo展示省市两级联动,三级联动同理. 样式可以进行自定义. <section class="mySetti ...
js原生，省市区三级联动插件
js原生,省市区三级联动插件 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
vue基于element-ui的Select选择器实现的动态多级联动下拉选择
本文讲的是 vue基于 element-ui 的 Select选择器实现的动态多级联动下拉选择基于原生select标签实现请看我的另外一篇文章 vue实现动态多级联动选择本文demo地址代码如 ...

原生JS实现多级联动

针对第一个下拉框一般的做法是在页面加载时就将内容进行初始化填充进去

后面的下拉框就根据前面的值进行初始化即可

原生JS实现多级联动相关推荐

最新文章

热门文章