App下載

用JS實現(xiàn)簡單的省市聯(lián)動

猿友 2021-02-20 18:09:37 瀏覽數(shù) (8109)
反饋

用JS實現(xiàn)簡單的省市聯(lián)動

技術分析:

使用 javascript 實現(xiàn)城市二級聯(lián)動(onchange() 當下拉框變化時觸發(fā)事件 createTextNode() 方法和 createElement() 方法以及 appendChild() 方法)。

代碼步驟:

1、首先確定事件為 onchange() 事件,并為該事件綁定一個函數(shù)。書寫該函數(shù)。

2、創(chuàng)建一個二維數(shù)組。

3、在判斷用戶選擇的是哪一個省份。

4、獲取該省份下的城市。

5、創(chuàng)建文本節(jié)點和元素節(jié)點,將文本節(jié)點添加到元素節(jié)點中。

6、獲取第二個下拉框元素并把元素節(jié)點添加到第二個下拉框中。7、清除第二個下拉框(如果不清除,就會有上一次的遺留)。效果圖如下:

微信截圖_20210220092940

微信截圖_20210220092931

微信截圖_20210220092912

源代碼如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>省市聯(lián)動</title>
	</head>
	<body>
		<!--省份的下拉框-->
		<select name="province" id="province" onchange="changeCity()">   <!--使用改變下拉框onchange實現(xiàn)-->
		    <option value="0">請選擇</option>
		    <option value="1">湖北省</option>
		    <option value="2">湖南省</option>
		    <option value="3">廣東省</option>
		</select>
		<!--城市的下拉框-->
		<select name="city" id="city">
		    <option value="0">請選擇</option>
		</select>
		
		<script>
		    // 創(chuàng)建一個二維的數(shù)組,用來存儲各個省份對應的城市
		    var cities = new Array();
		    cities[0] = new Array("武漢市","黃岡市","荊州市","仙桃市","黃石市","宜昌市");
		    cities[1] = new Array("長沙市","湘潭市","株洲市","衡陽市","岳陽市","郴州市");
		    cities[2] = new Array("廣州市","珠海市","深圳市","東莞市","佛山市","茂名市");
		
		    function changeCity() {
		        // 獲取省份的下拉框
		        var pro = document.getElementById("province");
		        // 獲取城市下拉框
		        var city = document.getElementById("city");
		        // 獲取你點擊的省的value
		        var val = pro.value;
		        val = val - 1;
		        // 清空城市下拉框里面的城市
		        city.options.length = 1;      //因為每次選新的省份,上次選的省份的城市也會出現(xiàn),所以新添之前清空即可
		        // 遍歷所有城市
		        for(var i=0;i<cities.length;i++){
		            // 匹配省份對應的城市
		            if(val == i){
		                // 遍歷用戶選擇的省份的城市        <option value="3">廣東省</option>這個里面的文本內(nèi)容就稱為文本節(jié)點。
		                for(var j=0;j<cities[i].length;j++){
		                    // 創(chuàng)建城市的文本節(jié)點
		                    var text = document.createTextNode(cities[i][j]);
		                    // 創(chuàng)建元素節(jié)點
		                    var opt = document.createElement("option");
		                    // 將城市的文本節(jié)點添加到option元素節(jié)點里面
		                    opt.appendChild(text) ;      //在option標簽里添加一個子節(jié)點,子節(jié)點里放文本
		                    // 將添加了文本內(nèi)容的option標簽放在上面城市下拉框里面
		                    city.appendChild(opt);       //在城市下拉框里添加子節(jié)點,里面放option標簽
		                }
		            }
		        }
		    }
		</script>
	</body>
</html>

推薦好課:JavaScript微課、小白學前端:JavaScript零基礎入門到進階


0 人點贊