JS實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)

管理

編輯

刪除

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

其他

js實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)

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

<!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)建三個(gè)下拉框這里為了方便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)建兩個(gè)對(duì)象用來(lái)存儲(chǔ)地名
		var obj={
			"河南":["鄭州","周口","商丘","安陽(yáng)","南陽(yáng)"],
			"云南":["大理","麗江","昆明","玉溪"],
			"山東":["菏澤","青島","濟(jì)南","煙臺(tái)"]
				}
			var obj1={
					"鄭州":["金水區(qū)","新鄭市","二七區(qū)","中牟縣"],
					"周口":["鹿邑縣","鄲城縣","21","121"],
					"商丘":["1223","321","321","123"],
					"安陽(yáng)":["滑縣","21","321"],
					"南陽(yáng)":["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"],
					"濟(jì)南":["豬娃縣","豬頭縣","豬縣"],
					"煙臺(tái)":["豬奶子縣","豬腦縣","豬肘子縣"]
					
				}
				//for-in循環(huán)輸出obj的Key
				for ( var x in obj) {
					$("<option>"+x+"</option>").appendTo("#a");
				}
				//創(chuàng)建一個(gè)改變事件獲取框中被選中的地名獲得值
				$("#a").change(function(){
					var arr=$(this).val();
					//獲取的值為obj的key 這里將obj的值賦給arr
					var arr1=obj[arr];
					//清除上次點(diǎn)擊打印出來(lái)的值
					$("#b").html("");
					//循環(huán)輸出arr的值
					for(var i=0;i<arr1.length;i++){
						$("<option>"+arr1[i]+"</option>").appendTo("#b");
					}
					//虛擬點(diǎn)擊
					$("#b").change();
				})
				//基本同上不過(guò)是利用obj的值當(dāng)作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");
					}
				})
					//虛擬點(diǎn)擊點(diǎn)擊
					$("#a").change();
					
		</script>
	</body>
</html>

實(shí)現(xiàn)效果如下