當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript实现省市联动
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现省市联动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ? 我們經常會遇到選擇省市縣的下拉框。比如我們選擇了省份的話，縣的下拉框會自動篩選，接下來我們就做一個這樣的省市聯動吧！！！
先使用一個二維數組存儲省份的信息：
<script>var provinceArr=new Array(5);provinceArr[0]=new Array("南安市","泉州市","廈門市","福安市","福州市");provinceArr[1]=new Array("鄭州市","洛陽市","濮陽市","駐馬店市");provinceArr[2]=new Array("石家莊市","唐山","秦皇島","邯鄲");provinceArr[3]=new Array("西安市","寶雞市","延安");provinceArr[4]=new Array("菏澤市","濟南市","青島");</script>定義一個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 οnchange="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?
轉載于:https://www.cnblogs.com/jiguiyan/p/10541642.html
總結
以上是生活随笔為你收集整理的JavaScript实现省市联动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java中后端拼接字符串返回前台页面换行
- 下一篇： 一本通1655数三角形