免費(fèi)AI編程助手
用JS實(shí)現(xiàn)簡單的省市聯(lián)動(dòng)
技術(shù)分析：
使用 javascript 實(shí)現(xiàn)城市二級聯(lián)動(dòng)（onchange() 當(dāng)下拉框變化時(shí)觸發(fā)事件 createTextNode() 方法和 createElement() 方法以及 appendChild() 方法）。
代碼步驟：
1、首先確定事件為 onchange() 事件,并為該事件綁定一個(gè)函數(shù)。書寫該函數(shù)。
2、創(chuàng)建一個(gè)二維數(shù)組。
3、在判斷用戶選擇的是哪一個(gè)省份。
4、獲取該省份下的城市。
5、創(chuàng)建文本節(jié)點(diǎn)和元素節(jié)點(diǎn)，將文本節(jié)點(diǎn)添加到元素節(jié)點(diǎn)中。
6、獲取第二個(gè)下拉框元素并把元素節(jié)點(diǎn)添加到第二個(gè)下拉框中。7、清除第二個(gè)下拉框（如果不清除，就會(huì)有上一次的遺留）。效果圖如下：
源代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市聯(lián)動(dòng)</title>
</head>
<body>
<!--省份的下拉框-->
<select name="province" id="province" onchange="changeCity()"> <!--使用改變下拉框onchange實(shí)現(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)建一個(gè)二維的數(shù)組，用來存儲(chǔ)各個(gè)省份對應(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");
// 獲取你點(diǎn)擊的省的value
var val = pro.value;
val = val - 1;
// 清空城市下拉框里面的城市
city.options.length = 1; //因?yàn)槊看芜x新的省份，上次選的省份的城市也會(huì)出現(xiàn)，所以新添之前清空即可
// 遍歷所有城市
for(var i=0;i<cities.length;i++){
// 匹配省份對應(yīng)的城市
if(val == i){
// 遍歷用戶選擇的省份的城市 <option value="3">廣東省</option>這個(gè)里面的文本內(nèi)容就稱為文本節(jié)點(diǎn)。
for(var j=0;j<cities[i].length;j++){
// 創(chuàng)建城市的文本節(jié)點(diǎn)
var text = document.createTextNode(cities[i][j]);
// 創(chuàng)建元素節(jié)點(diǎn)
var opt = document.createElement("option");
// 將城市的文本節(jié)點(diǎn)添加到option元素節(jié)點(diǎn)里面
opt.appendChild(text) ; //在option標(biāo)簽里添加一個(gè)子節(jié)點(diǎn)，子節(jié)點(diǎn)里放文本
// 將添加了文本內(nèi)容的option標(biāo)簽放在上面城市下拉框里面
city.appendChild(opt); //在城市下拉框里添加子節(jié)點(diǎn)，里面放option標(biāo)簽
}
}
}
}
</script>
</body>
</html>推薦好課：JavaScript微課、小白學(xué)前端：JavaScript零基礎(chǔ)入門到進(jìn)階
