使用JavaScript实现省市县三级联动

最新推荐文章于 2024-05-22 09:19:22 发布

两只羊-

最新推荐文章于 2024-05-22 09:19:22 发布

阅读量1.8k

点赞数 7

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lzy_55/article/details/126184099

版权

使用js实现省市县三级联动效果如下:

代码如下：

<body>
     省：<select id="province"></select>
     市：<slesct id="city"></select>
     县：<select id="county"></select>
     <scritp src="citys.js"></script>
     <script>
          //获取选择框
          var _province=document.querySelector("#province");
          var _city=document.querySelector("#city");
          var _county=document.querySelector("#county");

          //获取所有的省的数组
          var provinces=citys.districts[0].districts;
          //obj每个省对象
          provinces.forEach(function(obj){
               _province.innerHTML+=`<option value="${obj.adcode}">${obj.name}</option>`;
          })

          //发生改变时执行的函数，当改变省时，其后的也会改变成对应的地区
          showCitys();
          //切换省时，市和县都要切换
          _province.onchange=function(){
               showCitys();
               showCounty();
          }

          //加载市
          function showCitys(){
               //每次都要重新清空框里的内容
               _city.innerHTML="";
               //获取当前所选的省的编码
               var code=_province.value;
               //根据编码获取对应的省的对象
               var province=provinces.find(function(obj){
                    return obj.adcode==code;
               })
               //获取所有市的数组
               var citys=province.districts;
               //obj:每个市对象
               citys.forEach(function(obj){
                    _city.innerHTML+=`<option value="${obj.adcode}">${obj.name}</option>`;
               })
          }

           //发生改变时执行的函数，当改变省、市时，其后的也会改变成对应的地区
           showCounty();
           _city.onchange=function(){
                showCounty();
           }

           //加载县
           function showCounty(){
                //每次都要重新清空框里的内容
                _county.innerHTML="";
                //获取当前所选的省的编码
                var provinceCode=_province.value;
                //获取当前所选的市的编码
                var cityCode=_city.value;
                //根据省编码获取相应的省的对象
                var province=provinces.find(function(obj){
                     return obj.adcode==provinceCode;
                })
                //获取所有市的数组
                var citys=province.districts;
                //根据市编码获取相应的市对象
                //obj：每一个市对象
                var city=citys.find(function(obj){
                     return obj.adcode==cityCode;
                })
                //获取所有县的数组
                var countys=city.districts;
                //obj:每一个县对象
                countys.forEach(function(obj){
                     _county.innerHTML+=`<option value="${obj.adcode}">${obj.name}</option>`;
                })
           }
     </script>
</body>

因引用的citys.js的数据太多，所以截取了一部分如下：

citys.js

var citys = {
		"districts": [{	
				"adcode": "100000",
				"name": "中华人民共和国",
				"districts": [{
						"adcode": "410000",
						"name": "河南省",
						"districts": [{
								"citycode": "0379",
								"adcode": "410300",
								"name": "洛阳市",
								"center": "112.434468,34.663041",
								"level": "city",
								"districts": [{
									"citycode": "0379",
									"adcode": "410323",
									"name": "新安县",
									"center": "112.141403,34.728679",
									"level": "district",
									"districts": []
								}]
							},
							{
								"citycode": "0398",
								"adcode": "411200",
								"name": "三门峡市",
								"center": "111.194099,34.777338",
								"level": "city",
								"districts": [{
									"citycode": "0398",
									"adcode": "411221",
									"name": "渑池县",
									"center": "111.762992,34.763487",
									"level": "district",
									"districts": []
								}]
							}
						]
					},
					{
						"citycode": [],
						"adcode": "440000",
						"name": "广东省",
						"center": "113.280637,23.125178",
						"level": "province",
						"districts": [{
							"citycode": "0754",
							"adcode": "440500",
							"name": "汕头市",
							"center": "116.708463,23.37102",
							"level": "city",
							"districts": [{
								"citycode": "0754",
								"adcode": "440513",
								"name": "潮阳区",
								"center": "116.602602,23.262336",
								"level": "district",
								"districts": []
							}]
						}]
					}]

		    }]			
		}

代码就以上所示。