使用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所有地区的代码、需要的自行下载。