JS練習：兩級聯動
阿新 • • 發佈：2018-11-24
級聯 create clas 得到 當前 動態 hid chang 技術分享 
代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>兩級聯動</title> <script> //準備數據 var provinces = [ ["深圳市", "東莞市", "惠州市", "廣州市"], ["長沙市", "嶽陽市", "株洲市", "湘潭市"], ["廈門市", "福州市View Code", "漳州市", "泉州市"] ]; /* 1. 確定事件: onchange 2. 函數: selectProvince() 3: 得到當前操作元素 得到當前選中的是那一個省份 從數組中取出對應的城市信息 動態創建城市元素節點 添加到城市select中 */ function selectProvince() {var province = document.getElementById("province"); //得到當前選中的是哪個省份 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> <form action=""> <!--選擇省份--> <label for="province"></label> <select onchange="selectProvince()" id="province"> <option value="-1">--請選擇--</option> <option value="0">廣東省</option> <option value="1">湖南省</option> <option value="2">福建省</option> </select> <!--選擇城市--> <label for="city"></label> <select id="city"></select> </form> </body> </html>
JS練習：兩級聯動