當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JavaScript实现省市联动
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现省市联动
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
? ? ? ? 我們經(jīng)常會(huì)遇到選擇省市縣的下拉框。比如我們選擇了省份的話，縣的下拉框會(huì)自動(dòng)篩選，接下來我們就做一個(gè)這樣的省市聯(lián)動(dòng)吧！！！
先使用一個(gè)二維數(shù)組存儲(chǔ)省份的信息：
<script>var provinceArr=new Array(5);provinceArr[0]=new Array("南安市","泉州市","廈門市","福安市","福州市");provinceArr[1]=new Array("鄭州市","洛陽(yáng)市","濮陽(yáng)市","駐馬店市");provinceArr[2]=new Array("石家莊市","唐山","秦皇島","邯鄲");provinceArr[3]=new Array("西安市","寶雞市","延安");provinceArr[4]=new Array("菏澤市","濟(jì)南市","青島");</script>定義一個(gè)onchange事件進(jìn)行監(jiān)聽：
<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（）函數(shù)進(jìn)行檢驗(yàn) function provinceChange(province){ console.log(provinceArr[province.value]);//province.value是獲取選擇的省份 }
檢驗(yàn)的結(jié)果：
?
?
?打印出的結(jié)果說明數(shù)據(jù)已存入數(shù)組中，現(xiàn)在需要將它顯示在下一個(gè)下拉列表中
最終效果：?
?
?代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>省市聯(lián)動(dòng)</title> 6 <script> 7 var provinceArr=new Array(5); 8 provinceArr[0]=new Array("南安市","泉州市","廈門市","福安市","福州市"); 9 provinceArr[1]=new Array("鄭州市","洛陽(yáng)市","濮陽(yáng)市","駐馬店市"); 10 provinceArr[2]=new Array("石家莊市","唐山","秦皇島","邯鄲"); 11 provinceArr[3]=new Array("西安市","寶雞市","延安"); 12 provinceArr[4]=new Array("菏澤市","濟(jì)南市","青島"); 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\'>--請(qǐng)選擇--</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");//獲取元素標(biāo)簽option 26 cityOption.innerText=cityArr[i];//把數(shù)組里面城市的信息顯示到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">--請(qǐng)選擇--</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">--請(qǐng)選擇--</option> 48 </select> 49 </body> 50 </html> 省市聯(lián)動(dòng).html?
轉(zhuǎn)載于:https://www.cnblogs.com/jiguiyan/p/10541642.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript实现省市联动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java中后端拼接字符串返回前台页面换行
- 下一篇： 一本通1655数三角形