三级省市联动

QAQwin

于 2022-08-03 18:56:33 发布

阅读量807

点赞数

文章标签： html 前端 jquery javascript

本文链接：https://blog.csdn.net/QAQwin/article/details/126146663

版权

三级省市联动

三级省市联动，或者称为三级城市联动，就是我们在学习js里比较简单的下拉菜单的改动，考察我们对数组，遍历数组以及其他比较基础的掌握。
我写的是关于省市区的三级联动`

在这里插入代<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	    <select id="p"></select>省
		<select id="c"></select>市
		<select id="d"></select>区
	   
		<script>
			
			var data={
			   "江苏省":["南京市","无锡市","苏州市"],
			  "浙江省":["杭州市","宁波市"],
			  "安徽省":["合肥市","马鞍山市"]
			  }
			             
			   var citys={
			   "南京市":["玄武区","雨花台区","鼓楼区","秦淮区","六合区"],
			   "无锡市":["滨湖区","惠山区","梁溪区"],
			   "苏州市":["姑苏区","吴江区"],
			   "杭州市":["西湖区","临安区","上城区"],
			   "宁波市":["江北区","江东区"],
			   "合肥市":["蜀山区","瑶海区"],
			   "马鞍山市":["花山区","雨山区"]
			   }
			
			for(var  k  in  data ){
				$("<option>" + k + "</option>").appendTo( "#p");
			}
			
			$("#p").change( function(){
				// 1 切到哪？
				var a = $(this).val();
				// 2 获取城市数组
				var arr3 = data[a];
				// 2.5 清空
				$("#c").html("");
				// 3 遍历数组动态添加
				for(var i=0;i<arr3.length;i++){
					$("<option>" + arr3[i] + "</option>").appendTo( "#c");
				}
				// 虚拟点击 
				$("#c").change();
			})
			
			$("#c").change( function(){
				// 1 切到哪？
				var h = $(this).val();
				// 2 获取城市数组
				var arr1 = citys[h];
				// 2.5 清空
				$("#d").html("");
				// 3 遍历数组动态添加，与上面是方法基本一样
				for(var j=0;j<arr1.length;j++){
					$("<option>" + arr1[j] + "</option>").appendTo( "#d");
				}
			})
			// 虚拟点击 
			$("#p").change();
		</script>
	</body>
</html>