JQuery三级联动

最新推荐文章于 2023-05-27 23:48:40 发布

white_froth

最新推荐文章于 2023-05-27 23:48:40 发布

阅读量330

点赞数 1

文章标签： jquery 前端 javascript html5 html

本文链接：https://blog.csdn.net/white_froth/article/details/126095766

版权

三级联动想必大家都见过吧，最常见的就是由省、市、县组成的三级联动，三个下拉框，第一个下拉框控制，第二第三下拉框，第二控制第三个下拉框。接下来看看怎么操作吧~~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		// 引入JQuery的EDN加速
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>

	<body>
	//创建三个下拉框
		<select id="p">省</select>
		<select id="c">市</select>
		<select id="x">县</select>
		
		<script>
		//创建对象
			var ss = {
				"河南": ["郑州", "信阳", "安阳", "洛阳", "濮阳"],
				"山东": ["济南", "青岛", "潍坊", "淄博", "菏泽"],
				"云南": ["大理", "昆明", "丽江", "西双版纳", "玉溪"]
			};
			var yy = {
				"郑州": ["金水", "新郑", "二七", "惠济", "汞阳", "中原"],
				"安阳": ["滑县", "林州", "汤阴", "内黄"],
				"信阳": ["新县", "息县", "罗山", "光山", "固始", "商城"],
				"洛阳": ["嵩县", "汝阳", "洛宁", "宜阳", "新安", "伊川"],
				"濮阳": ["清丰", "南乐", "范县", "台前", "濮阳"],
				"济南": ["槐荫", "历下", "济阳", "平阴", "商河"],
				"青岛": ["胶州", "平度", "莱西"],
				"潍坊": ["青州", "寿光", "昌乐", "安丘", "高密"],
				"淄博": ["高青", "恒台"],
				"菏泽": ["曹县", "单县", "东明", "成武", "巨野"],
				"大理": ["祥云", "宾川", "永平", "云龙", "剑川"],
				"昆明": ["安宁", "嵩明", "宜良", "富明"],
				"丽江": ["永胜", "华坪", "玉龙纳西"],
				"西双版纳": ["景洪", "勐海县", "勐腊县"],
				"玉溪": ["澄江", "华宁", "易门"],
			};
			//for  in 遍历，将"ss"key的键值赋予"k",附加在id="p"下拉框
			for (k in ss) {
				$("<option>" + k + "</option>").appendTo("#p");
			}
			//
			$("#p").change(function() {
				var k = $("#p").val();
				var arr = ss[k];//将ss[k]数组的值赋予arr
				//id="c"=空，切换省份清除上次市的值，（）内可以不填写
				$("#c").html("<option>--请输入--</option>");
				//for 遍历 输出数组arr[i]附加在id="c"下拉框,
				for (i = 0; i < arr.length; i++) {
					$("<option>" + arr[i] + "</option>").appendTo("#c");
				}
				//虚拟点击
				$("#c").change();
				// <!--市级联动-- >
				
				$("#c").change(function() {
					var z = $("#c").val();
					var ar = yy[z];//将yy[z]数组的值赋予ar
					//id="x"=空，切换省份清除上次市的值，（）内可以不填写
					$("#x").html("<option>--请输入--</option>");
					//for 遍历 输出数组arr[i]附加在id="x"下拉框,
					for (j = 0; j < ar.length; j++) {
						$("<option>" + ar[j] + "</option>" + arr[i]).appendTo("#x");
					}
				});
				//虚拟点击
				$("#c").change();

			});
			//虚拟点击
			$("#p").change();
			
					
		</script>
	</body>
</html>