免費(fèi)AI編程助手
用JS實現(xiàn)簡單的省市聯(lián)動
技術(shù)分析：
使用 javascript 實現(xiàn)城市二級聯(lián)動（onchange() 當(dāng)下拉框變化時觸發(fā)事件 createTextNode() 方法和 createElement() 方法以及 appendChild() 方法）。
代碼步驟：
1、首先確定事件為 onchange() 事件,并為該事件綁定一個函數(shù)。書寫該函數(shù)。
2、創(chuàng)建一個二維數(shù)組。
3、在判斷用戶選擇的是哪一個省份。
4、獲取該省份下的城市。
5、創(chuàng)建文本節(jié)點和元素節(jié)點，將文本節(jié)點添加到元素節(jié)點中。
6、獲取第二個下拉框元素并把元素節(jié)點添加到第二個下拉框中。7、清除第二個下拉框（如果不清除，就會有上一次的遺留）。效果圖如下：
源代碼如下：
<!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ù)組，用來存儲各個省份對應(yīng)的城市
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++){
// 匹配省份對應(yīng)的城市
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標(biāo)簽里添加一個子節(jié)點，子節(jié)點里放文本
// 將添加了文本內(nèi)容的option標(biāo)簽放在上面城市下拉框里面
city.appendChild(opt); //在城市下拉框里添加子節(jié)點，里面放option標(biāo)簽
}
}
}
}
</script>
</body>
</html>推薦好課：JavaScript微課、小白學(xué)前端：JavaScript零基礎(chǔ)入門到進(jìn)階
