省份城市實現二級聯動效果
阿新 • • 發佈:2019-02-16
<script>
var citys = new Array(); //一個二維陣列,用於儲存省市,依次對應citys[1]=new Array("濟南","青島","煙臺","濟寧","德州","萊蕪");
citys[2]=new Array("安慶","阜陽","合肥","馬鞍山","蕪湖");
citys[3]=new Array("北京");
citys[4]=new Array("福州","龍巖","寧德","莆田");
citys[5]=new Array("潮州","佛山","廣州");
function change(value){
document.getElementById("city").options.length=0;
for(
var m =0 ;m<citys[value].length;m++){//如果使用者選擇了廣東,則會將5傳遞到 change() 方法裡,就會選擇city[5]={.......}, 迴圈取出裡面的城市
var opt=document.createElement("option");//建立一個 <option></option> 標籤
var node=document.createTextNode(citys[value][m]+"");// 建立一個文字 文字內容就是 讀取出來的城市 等同於 潮州
opt.appendChild(node);//將文字新增到標籤裡等同於<option>潮州</option>
document.getElementById("city").appendChild(opt);//將<option>潮州</option>新增到下拉列表裡等同於<select class="se2" id="city"><option>潮州</option></select>
}
}
</script>
省份:<select class="se1" id="province" onchange="change(this.value)" style="width: 170px; border: 2px solid black;" ><!--定義省份下拉列表-->
<option value="1">選擇省份</option>
<option value="2">安徽</option>
<option value="3">北京</option>
<option value="4">福建</option>
<option value="5">廣東</option>
</select> <br />
城市:<select class="se2" id="city" style="width: 170px; border: 2px solid black;"><!--定義城市下拉列表-->
<option value="0">請選擇城市</option>
</select>