JS實現(xiàn)三級聯(lián)動

管理

編輯

刪除

CRMEB-慕白寒窗雪 2023-05-19 12:04:35

其他

js實現(xiàn)三級聯(lián)動

三級聯(lián)動就是平時網頁上需要選擇的省市縣對應位置的下拉欄模塊，當選擇好省位置后市的下拉欄更新為已選省的，縣類似。在日常生活中我們經常使用比如各類購物軟件的地址欄，各種平臺的認證填寫的家挺住址都會用到三級聯(lián)動，本次內容為使用JS實現(xiàn)簡單的三級聯(lián)動。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		//引入jQuery cdn加速
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
	//創(chuàng)建三個下拉框這里為了方便id定義為a、b、c
		<select name="" id="a">
		</select>
		<select name="" id="b">
		</select>
		<select name="" id="c">
		</select>
		<script type="text/javascript">
		//創(chuàng)建兩個對象用來存儲地名
		var obj={
			"河南":["鄭州","周口","商丘","安陽","南陽"],
			"云南":["大理","麗江","昆明","玉溪"],
			"山東":["菏澤","青島","濟南","煙臺"]
				}
			var obj1={
					"鄭州":["金水區(qū)","新鄭市","二七區(qū)","中牟縣"],
					"周口":["鹿邑縣","鄲城縣","21","121"],
					"商丘":["1223","321","321","123"],
					"安陽":["滑縣","21","321"],
					"南陽":["111","222","333","444"],
					"大理":["AAA","BBB","CCC","DDD"],
					"麗江":["EEE","FFF","GGG","HHH"],
					"昆明":["III","JJJ","KKK","RRR"],
					"玉溪":["MMM","NNN","XXXX"],
					"菏澤":["曹縣","HEHE","HAHA","HEIHEI"],
					"青島":["XIXI","LALA","CA","WC"],
					"濟南":["豬娃縣","豬頭縣","豬縣"],
					"煙臺":["豬奶子縣","豬腦縣","豬肘子縣"]
					
				}
				//for-in循環(huán)輸出obj的Key
				for ( var x in obj) {
					$("<option>"+x+"</option>").appendTo("#a");
				}
				//創(chuàng)建一個改變事件獲取框中被選中的地名獲得值
				$("#a").change(function(){
					var arr=$(this).val();
					//獲取的值為obj的key 這里將obj的值賦給arr
					var arr1=obj[arr];
					//清除上次點擊打印出來的值
					$("#b").html("");
					//循環(huán)輸出arr的值
					for(var i=0;i<arr1.length;i++){
						$("<option>"+arr1[i]+"</option>").appendTo("#b");
					}
					//虛擬點擊
					$("#b").change();
				})
				//基本同上不過是利用obj的值當作obj1的key獲取obj1的值
				$("#b").change(function(){
					var arr2=$(this).val();
					var arr3=obj1[arr2]
					$("#c").html("");
					for(var j=0;j<arr3.length;j++){
						$("<option>"+arr3[j]+"</option>").appendTo("#c");
					}
				})
					//虛擬點擊點擊
					$("#a").change();
					
		</script>
	</body>
</html>

實現(xiàn)效果如下