【javaweb】JS實現省市聯動
阿新 • • 發佈：2018-12-10
需求：比如在註冊頁面中，需要選擇籍貫，當我們選擇省的時候，市可以隨著省的選擇不同而變動。
字首知識：https://blog.csdn.net/qq_42370146/article/details/84326604
過程分析：
1. 確定事件: onchange
2. 函式: selectProvince()
3. 函式裡面的操作：
得到當前操作元素
得到當前選中的是那一個省份
從陣列中取出對應的城市資訊
動態建立城市元素節點
新增到城市select中
原始碼如下：
<html> <head> <meta charset="UTF-8"> <title></title> <script> /* 準備工作 : 準備資料 */ var provinces = [ ["深圳市","東莞市","惠州市","廣州市"], ["長沙市","岳陽市","株洲市","湘潭市"], ["廈門市","福州市","漳州市","泉州市"] ]; function selectProvince(){ var province = document.getElementById("province"); //得到當前選中的是哪個省份 //alert(province.value); var value = province.value; //從陣列中取出對應的城市資訊 var cities = provinces[value]; var citySelect = document.getElementById("city"); //清空select中的option citySelect.options.length = 0; for (var i=0; i < cities.length; i++) { var cityText = cities[i]; //動態建立城市元素節點 <option>東莞市</option> //建立option節點 var option1 = document.createElement("option"); // <option></option> //建立城市文字節點 var textNode = document.createTextNode(cityText) ;// 東莞市 //將option節點和文字內容關聯起來 option1.appendChild(textNode); //<option>東莞市</option> //新增到城市select中 citySelect.appendChild(option1); } } </script> </head> <body> <!--選擇省份--> <select onchange="selectProvince()" id="province"> <option value="-1">--請選擇--</option> <option value="0">廣東省</option> <option value="1">湖南省</option> <option value="2">福建省</option> </select> <!--選擇城市--> <select id="city"></select> </body> </html>
內容示例：
