<head>
<meta charset="UTF-8">
<title></title>
<script>
/
準備工作 : 準備數據
/
var provinces = [
["深圳市","東莞市","惠州市","廣州市"],
["長沙市","岳陽市","株洲市","湘潭市"],
["廈門市","福州市","漳州市","泉州市"]
];
/*
- 確定事件: onchange
- 函數: selectProvince()
-
函數裏面要搞事情了
得到當前操作元素
得到當前選中的是那一個省份
從數組中取出對應的城市信息動態創建城市元素節點 添加到城市select中 */ 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++) {// alert(cities[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>