基于JQuery+Json数据格式的省市区三级联动

约定不等于承诺〃 2022-05-12 06:46 210阅读 0赞

# 本文章适用于新手，老手自便 #

先看源码:

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<meta charset="utf-8">
    	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    	<script type="text/javascript" src="js/cityjson.js"></script>
    	<script type="text/javascript">
    	$(document).ready(function(){
    	
    		//操作DOM，加载数据到下拉列表 foreach
    		$.each(data,function(index,item){ //循环data数据中每一个 
    			$("#province").append("<option value="+index+">"+item.name+"</option>");
    			
    		});
    		
    		//点击不同的省，加载市
    		$("#province").bind("change",function(){
    			//得到哪个省被点击
    			
    			var province = $(this).val();//得到当前省份
    			var city = data[province].child;//得到当前省份的所有城市
    			//加载该省的数据
    		
    		    $("#city").empty();//重新选择省时候清空城市列表
    		    $("#area").empty();//重新选择省时候清空区列表
    		    $("#city").append("<option>请选择</option>");
    			$.each(city,function(index2,item){
    			
    			$("#city").append("<option value="+index2+">"+item.name+"</option>");
    			
    			});
    			
    		});
    
     	$("#city").bind("change",function(){
     		
     		  $("#area").empty();//重新选择城市时候清空区列表
    		   $("#area").append("<option>请选择</option>");
    				
     			var province = $("#province").val(); //得到当前省
     			var citynum = $(this).val();//得到当前城市
     			var are = data[province].child[citynum].child; //得到当前城市所对应的城区
     			
     			
    			$.each(are,function(index3,item){
    		$("#area").append("<option value="+index3+">"+item+"</option>");
    				
    			});
    			
     	});
    
    	});
    	</script>
    </head>
    <body>
    	省：<select id="province"><option>请选择</option></select>
    	市：<select id="city"></select>
    	区：<select id="area"></select>
    </body>
    </html>

这里是浏览器的效果图：  
![在这里插入图片描述][70]

再来看一下数据的代码片段：

var data = 
    {
        "110000": {
            "name": "北京市",
            "child": {
                "110100": {
                    "name": "市辖区",
                    "child": {
                        "110101": "东城区",
                        "110102": "西城区",
                        "110105": "朝阳区",
                        "110106": "丰台区",
                        "110107": "石景山区",
                        "110108": "海淀区",
                        "110109": "门头沟区",
                        "110111": "房山区",
                        "110112": "通州区",
                        "110113": "顺义区",
                        "110114": "昌平区",
                        "110115": "大兴区",
                        "110116": "怀柔区",
                        "110117": "平谷区",
                        "110118": "密云区",
                        "110119": "延庆区"
                    }
                }
            }
        },
        "120000": {
            "name": "天津市",
            "child": {
                "120100": {
                    "name": "市辖区",
                    "child": {
                        "120101": "和平区",
                        "120102": "河东区",
                        "120103": "河西区",
                        "120104": "南开区",
                        "120105": "河北区",
                        "120106": "红桥区",
                        "120110": "东丽区",
                        "120111": "西青区",
                        "120112": "津南区",
                        "120113": "北辰区",
                        "120114": "武清区",
                        "120115": "宝坻区",
                        "120116": "滨海新区",
                        "120117": "宁河区",
                        "120118": "静海区",
                        "120119": "蓟州区"
                    }
                }
            }
        },

因为数据是基于全国的省市区，这里没有全部展示，只展示部分片段

这里是浏览器控制台的效果图，方便查找结点  
![在这里插入图片描述][70 1]

[70]: /images/20220512/3735a592b3c24882aeda6b4f5cc4178d.png
[70 1]: /images/20220512/6bf2bdc0bbe049debd8adbf27990ca1c.png