省市区三级联动

---

省市级三级联动

废话不多说，直接上代码!

1.html部分

代码如下（示例）：

	请选择省份：
			<select name="" id="province">
		        <option value="" selected>请选择省份</option>
		    </select>
		    请选择城市：
			<select name="" id="city">
		        <option value="" selected>请选择城市</option>
		    </select>
		    请选择地区：
			<select name="" id="area">
		        <option value="" selected>请选择地区</option>
		    </select>

2.js(jquery部分)

注意:要导入jquery包，写入正确的路径
：

<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		//定义几个省的城市数组
		var json = {
					"江苏":{
								"南京":["玄武区","雨花台区","鼓楼区","秦淮区","六合区"],
								"无锡":["滨湖区","惠山区","梁溪区"],
								"连云港":["海州区","连云区"],
								"常州":["天宁区","钟楼区"]
						   },
					"四川":{
								"成都":["武侯区","金牛区","锦江区","成华区"],
								"绵阳":["涪城区","游仙区","盐亭县"],
								"南充":["仪陇","蓬安","阆中"]
						   },
					"黑龙江":{
								"哈尔滨":["松北区","双城区"],
								"齐齐哈尔":["龙沙区","碾子山区"],
								"大庆":["红岗区","龙凤区"]
							}
				   }
		//入口函数
		$(function(){
			//初始化第一个框的值
			for(var sheng in json){
				let option = '<option value="'+sheng+'">'+sheng+'</option>';
				$("#province").append(option);
			}
			//当第一个框的值发生改变时才添加第二个框的值
			$("#province").change(function(){
				//第一步先清空市得所有得子元素
				$("#city").html("");
				//然后给市添加一个option
				$("#city").append("<option value='' selected>请选择城市</option>");
				//第一步先清空区得所有得子元素
				$("#area").html("");
				//然后给区添加一个option
				$("#area").append("<option value='' selected>请选择地区</option>");
				//获取选中的值
				let province = this.value;
				//获取第0个字典元素,遍历添加键
				for(var si in json[province]){
					let option = '<option value="'+si+'">'+si+'</option>';
					$("#city").append(option);
				}
			})
			// 当第二个框值改变时才添加第三个框得值
			$("#city").change(function(){
				//第一步先清空区得所有得子元素
				$("#area").html("");
				//然后给区添加一个option
				$("#area").append("<option value='' selected>请选择地区</option>");
				//获取第二个框选的值
				let city = this.value;
				//获取第一个框得值
				let province = $("#province").val();
				//根据两个值锁定区数组
				for(var i in json[province][city]){
					let option = '<option value="'+json[province][city][i]+'">'+json[province][city][i]+'</option>';
					$("#area").append(option);
				}
			})
		})
	</script>

使用了json数据格式存储了省市区，方便简洁

---

总结

以上就是今天要讲的内容，本文简单介绍了一个小demo！