溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用JS實現簡單的省市聯動”，在日常操作中，相信很多人在怎么用JS實現簡單的省市聯動問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用JS實現簡單的省市聯動”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
使用 javascript 實現城市二級聯動（onchange() 當下拉框變化時觸發(fā)事件 createTextNode() 方法和 createElement() 方法以及 appendChild() 方法）。
1、首先確定事件為 onchange() 事件,并為該事件綁定一個函數。書寫該函數。
2、創(chuàng)建一個二維數組。
3、在判斷用戶選擇的是哪一個省份。
4、獲取該省份下的城市。
5、創(chuàng)建文本節(jié)點和元素節(jié)點，將文本節(jié)點添加到元素節(jié)點中。
6、獲取第二個下拉框元素并把元素節(jié)點添加到第二個下拉框中。7、清除第二個下拉框（如果不清除，就會有上一次的遺留）。效
源代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市聯動</title>
</head>
<body>
<!--省份的下拉框-->
<select name="province" id="province" onchange="changeCity()"> <!--使用改變下拉框onchange實現-->
<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)建一個二維的數組，用來存儲各個省份對應的城市
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; //因為每次選新的省份，上次選的省份的城市也會出現，所以新添之前清空即可
// 遍歷所有城市
for(var i=0;i<cities.length;i++){
// 匹配省份對應的城市
if(val == i){
// 遍歷用戶選擇的省份的城市 <option value="3">廣東省</option>這個里面的文本內容就稱為文本節(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é)點里放文本
// 將添加了文本內容的option標簽放在上面城市下拉框里面
city.appendChild(opt); //在城市下拉框里添加子節(jié)點，里面放option標簽
}
}
}
}
</script>
</body>
</html>到此，關于“怎么用JS實現簡單的省市聯動”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
