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

最新推荐文章于 2024-09-25 10:11:17 发布

GodXzz

最新推荐文章于 2024-09-25 10:11:17 发布

阅读量1.8k

点赞数 1

分类专栏： JQuery 文章标签： JQuery json java 三级联动

本文链接：https://blog.csdn.net/qq_36141369/article/details/82713662

版权

JQuery 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

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

先看源码:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><!--jq包-->
	<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>

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

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

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": "蓟州区"
                }
            }
        }
    },

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

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