js案例（省市县三级联动的实现）

三生有幸ii

已于 2022-08-05 19:54:40 修改

阅读量2.6k

点赞数 4

文章标签： javascript 前端 typescript

于 2022-08-05 19:48:55 首次发布

本文链接：https://blog.csdn.net/adminsir0/article/details/126184142

版权

js案例之实现省市县三级联动

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="provinces"></select>
    <select name="" id="citys"></select>
    <select name="" id="county"></select>

    <script src="./js/city.js"></script>
    <script>
        
        var _provinces=document.getElementById("provinces");//获取省下拉框节点
        var _citys=document.getElementById("citys");//获取市下拉框节点
        var _county=document.getElementById("county");//获取县下拉框节点

        var prov=citys.districts[0].districts;//获取所有省级对象
        // console.log(prov);

        // 遍历省级对象并添加省名，adcode
        prov.forEach(function(obj){
            _provinces.innerHTML+=`<option value="${obj.adcode}">${obj.name}</option>`
        });

        // 省级切换时市级联动
        _provinces.onchange=function(){
            showCitys();
            showCounty();
        }
        //定义市级操作函数
        function showCitys(){
            _citys.innerHTML=""//初始化
            var adcode=_provinces.value;//获取省级adcode
            // console.log(adcode);
            // 通过省级adcode得到整个省级对象
            var province=prov.find(function(obj){
                return obj.adcode==adcode;
            })
            console.log(province);
            var citys=province.districts;//得到市级对象

            // 遍历市级对象并添加市名，adcode
            citys.forEach(function(obj){
            _citys.innerHTML+=`<option value="${obj.adcode}">${obj.name}</option>`
        });
        }
        // 页面初始化
        showCitys();


        showCounty();
        _citys.onchange=function(){
            showCounty();
        }

        function showCounty(){
            _county.innerHTML=""
            var cityCode=_citys.value;//获取市级编码
            // console.log(cityCode);
            var provCode=_provinces.value;//获取省级编码
            // console.log(provCode);
            var province=prov.find(function(obj){
                return obj.adcode==provCode;
            })

            // console.log(province);

            var citys=province.districts;//获取市级对象
            console.log(citys)

            //市级联动
            var city=citys.find(function(obj){
                return obj.adcode==cityCode;
            })

            //获取县级对象
            var county=city.districts;
            console.log(county);

            //添加
            county.forEach(function(obj){

                _county.innerHTML+=`<option value="${obj.adcode}">${obj.name}</option>`
            })
        }
    </script>
</body>
</html>

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": []
							}]
						}]
					}]

		    }]			
		}

效果图
在这里插入图片描述

总结

1，省市县三级联动实现逻辑：
（1），导入js中的json数据（js代码部分）
（2），var prov=citys.districts[0].districts;获取所有省级对象，并获取到实现联动的adcode(关键)，name，完成省级下拉框。
（3），通过省级adcode，获取到每个省所对应的说有市级对象，并获取市级adcode，name，并设置省级框的change事件，保证省级框切换时市级框随之切换，完成市级下拉框（注意：需要将市级函数调用一次，将其加载到页面上）。
（4），同上，通过市级adcode获取到对应的县级对象，并设置change事件（注意：需要将县级函数调用一次，将其加载到页面上）。
（以上js中json数据仅为部分，由于数据过多不能完全上传，如需完整版可联系作者！）