JavaScript實現省市聯動
阿新 • • 發佈：2019-03-16
spa lose utf-8 二維數組 for col script 結果 meta 
我們經常會遇到選擇省市縣的下拉框。比如我們選擇了省份的話，縣的下拉框會自動篩選，接下來我們就做一個這樣的省市聯動吧！！！
先使用一個二維數組存儲省份的信息：
<script>
var provinceArr=new Array(5);
provinceArr[0]=new Array("南安市","泉州市","廈門市","福安市","福州市");
provinceArr[1]=new Array("鄭州市","洛陽市","濮陽市","駐馬店市");
provinceArr[
定義一個onchange事件進行監聽：
<select onchange="provinceChange(this)"> <!--顯示省份--> <option value="0">福建省</option> <option value="1"> 河南省</option> <option value="2">河北省</option> <option value="3">陜西省</option> <option value="4">山東省</option> </select>
書寫provinceChange（）函數進行檢驗
function provinceChange(province){
console.log(provinceArr[province.value]);//province.value是獲取選擇的省份
}
檢驗的結果：
打印出的結果說明數據已存入數組中，現在需要將它顯示在下一個下拉列表中
最終效果：
代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>省市聯動</title> 6 <script> 7 var provinceArr=new Array(5); 8 provinceArr[0]=new Array("南安市","泉州市","廈門市","福安市","福州市"); 9 provinceArr[1]=new Array("鄭州市","洛陽市","濮陽市","駐馬店市"); 10 provinceArr[2]=new Array("石家莊市","唐山","秦皇島","邯鄲"); 11 provinceArr[3]=new Array("西安市","寶雞市","延安"); 12 provinceArr[4]=new Array("菏澤市","濟南市","青島"); 13 function provinceChange(province){ 14 //console.log(provinceArr[province.value]); 15 var city=document.getElementById("city"); 16 if(province.value=="-1"){ 17 city.innerHTML=‘<option value=\‘-1\‘>--請選擇--</option>‘; 18 return; 19 20 } 21 22 var cityArr=provinceArr[province.value]; 23 city.options.length=0; 24 for(var i=0;i<cityArr.length;i++){ 25 var cityOption=document.createElement("option");//獲取元素標簽option 26 cityOption.innerText=cityArr[i];//把數組裏面城市的信息顯示到id為city的下拉列表中 27 city.appendChild(cityOption); 28 } 29 } 30 31 </script> 32 </head> 33 <body> 34 35 <select onchange="provinceChange(this)"> 36 <!--顯示省份--> 37 <option value="-1">--請選擇--</option> 38 <option value="0">福建省</option> 39 <option value="1"> 河南省</option> 40 <option value="2">河北省</option> 41 <option value="3">陜西省</option> 42 <option value="4">山東省</option> 43 44 </select> 45 <select id="city"> 46 <!--顯示市--> 47 <option value="-1">--請選擇--</option> 48 </select> 49 </body> 50 </html>省市聯動.html
JavaScript實現省市聯動