使用JS实现三级联动

利用js实现三级联动

直接放代码：

<div class="wrapper">省：<select id="province" onchange="showCitys()"></select>市：<select id="city" onchange="showCountry()"></select>县：<select id="country"></select></div><script src="./js/citys.js"></script><script>var _province=document.querySelector("#province");var _city=document.querySelector("#city");var _country=document.querySelector("#country");//所有省的数组var provinces=citys.districts[0].districts;for (let province of provinces) {_province.innerHTML+=`<option value="${province.adcode}">${province.name}</option>`;}//写根据省份的value值确定某个省showCitys();function showCitys(){_city.innerHTML="";var provinceCode=_province.value;//找到某个 省 下所有市的数组var provinceCheck=provinces.find(function(item){return item.adcode==provinceCode;});//遍历市的数组for (var city of provinceCheck.districts) {_city.innerHTML+=`<option value="${city.adcode}">${city.name}</option>`;}showCountry();};showCountry();function showCountry(){_country.innerHTML="";var provinceCode=_province.value;var cityCode=_city.value;var provinceCheck=provinces.find(function(item){return item.adcode==provinceCode;});var citysCheck=provinceCheck.districts.find(function(item){return item.adcode==cityCode;});for (let country of citysCheck.districts) {_country.innerHTML+=`<option value="${country.adcode}">${country.name}</option>`;}}</script>

讲一下思路：

1、首先需要获取所有省的数组，通过遍历得到省。for (let s of sequence) {}

2、获取市的数组、再进行遍历得到市。注：需要根据省份的adcode值与你选择的省份值进行对比，然后得到所有市的数组，var provinceCheck=provinces.find(function(item){
return item.adcode==provinceCode;
});

provinceCheck 代表省这个数组，provinceCheck.districts 代表省下所有市的数组，再对其进行遍历，就得到了每个市。

3、最后获取所有（县、镇）的数组，必须根据所在省、所在市才可以得到县、镇。依旧需要以上的办法引用。var provinceCode=_province.value;
var cityCode=_city.value;
                      var provinceCheck=provinces.find(function(item){
                            return item.adcode==provinceCode;
                      });
                      var citysCheck=provinceCheck.districts.find(function(item){
return item.adcode==cityCode;
                      });
provinceCheck：所在省   citysCheck：所在市 citysCheck.districts：所有县、镇的数组，然后再进行遍历即可。

注： οnchange="showCitys()" 发生改变时执行的函数，当改变省、市时，其后的也会改变成对应的地区。每次都要重新清空框里的内容。_city.innerHTML="";

最后我放了js所有地区的代码、需要的自行下载。

使用JS实现三级联动相关推荐

纯JS省市区三级联动
效果如图所示: HTML Code: [html] view plain copy <html> <head> <script type="text/javas ...
QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
JS 省市区三级联动
JS 省市区三级联动:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
简书 php三级联动,JS 实现三级联动
HTML部分三级联动请选择省份请选择城市请选择区县 JS部分 // var address = new Object(); var forms = document.forms[0]; //获 ...
原生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——EasyuiCombobox三级联动
有许多刚接触Easyui中Combobox控件的朋友可能都会遇到的问题:如何将Combobox做成三级联动? 现分享一个三级联动的案例给大家参考参考,经测试能通过.注意Combobox绑定的数据是Js ...
【转】纯JS省市区三级联动（行政区划代码更新至2015-9-30）
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...

使用JS实现三级联动

使用JS实现三级联动相关推荐

最新文章

热门文章