- 編寫html文檔，創(chuàng)建兩個下拉選擇框，一個表示省份名，一個表示城市名，用id選擇器，添加改變事件。
<select id="province" onchange="fillCity()"></select> //省
<select id="city"></select>// 市
- 使用數(shù)組存儲信息(文字作為數(shù)組下標(biāo))
var arr = new Array();
arr["湖南"] = ["常德", "衡陽", "益陽", "株洲","邵陽","岳陽","郴州"];
arr["廣東"] = ["東莞", "深圳", "廣州","河源" ];
arr["湖北"] = ["荊州", "武漢", "隨州", "宜昌"];
arr["吉林"] = ["長春", "遼源", "白化"];
- 聲明函數(shù)initData()，在第一個下拉框填充所有的省。
function initData(){ // 初始化
var province = document.getElementById("province"); // 通過id獲取到省
for(var i in arr){ //迭代文字下標(biāo)
var option = document.createElement("option"); // 在select中創(chuàng)建option節(jié)點
option.text = i;
option.value = i;
province.options.add(option);
}
}
4.聲明函數(shù)fillCity()，將在第一個下拉框選擇的省對應(yīng)的市填充到第二個下拉框中。
function fillCity(){
var city = document.getElementById("city");
city.options.length = 0; // 清除列表項
var provinceDep = document.getElementById("province").value;//獲取省名
for(var index in arr[provinceDep]){
var option = document.createElement("option"); // 創(chuàng)建節(jié)點
option.text = arr[provinceDep][index];
option.value = arr[provinceDep][index];
city.options.add(option);
}
}
- 最后為body標(biāo)簽加上onload事件并綁定initData()方法和fillCity()方法。
