HTML代碼 <select id="s1"> <option value="0">~請選擇省份~</option> <option value="1">湖北省</option> <option value="2">江西省</option> </select> <select name="" id= ...
HTML代碼
<select id="s1"> <option value="0">~請選擇省份~</option> <option value="1">湖北省</option> <option value="2">江西省</option> </select><select name="" id="city"> <option value="0">~請選擇城市~</option> </select> JS代碼 window.onload = function () { //創建一個二維數組，存儲城市 var arrCity = [["~請選擇城市~"],[ "武漢市", "黃岡市", "襄陽市"], ["南昌市", "景德鎮", "九江市"]];
//給省份綁定onchange時間 s1.onchange = function () { //1.獲取你選擇省份的value屬性 var val = document.getElementById("s1").value; //7.獲取城市的元素節點 var city = document.getElementById("city"); //9.每次觸發onchang時間後將清空第二個下拉框的option內容 city.innerHTML = "";
//2.遍歷二維數組中的省份 for (var i = 0; i < arrCity.length; i++) { //註意，比較的是角標 if(val == i){ //3.遍歷選擇省份下的城市 for(var j=0;j<arrCity[i].length;j++){ //4.添加option元素節點 var option = document.createElement("option"); //5.添加文本節點 var textNode = document.createTextNode(arrCity[i][j]); //6.將文本節點添加到option元素節點中 option.appendChild(textNode); //8.將元素節點添加到城市的元素節點下 city.appendChild(option); } } } } }
