快捷導(dǎo)航

js 實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)菜單效果

更新時(shí)間：2017年02月20日 10:18:52 作者：nick906

本文主要分享了js實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)菜單效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

效果如下：

代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>省市區(qū)三級(jí)聯(lián)動(dòng)</title>
</head>
<body>
 <form>
 <select id="province">
 <option>請(qǐng)選擇省份</option>
 </select>
 <select id="city">
 <option>請(qǐng)選擇城市</option>
 </select>
 <select id="district">
 <option>請(qǐng)選擇區(qū)域</option>
 </select> 
 </form>
 <script src="json.js"></script>
 <script type="text/javascript">
 var proData = [],
 cityData = [],
 distData = [];
 var proSelect = document.getElementById("province"),
 citySelect = document.getElementById("city"),
 districtSelect = document.getElementById("district");
 var curPro = "",
 curCity = "";
 // 封裝更新選擇列表函數(shù)
 function fillselect(select,list){
 for (var i = select.length-1; i > 0 ; i--){
 select.remove(i);
 }
 list.forEach(function(data){
 var option = new Option(data.name, data.sheng);
 option.dataset.di = data.di;
 select.add(option);
 })
 }
 // 將數(shù)據(jù)按省、市、地區(qū)分別存儲(chǔ)
 dataJson.forEach(function(data){
 if (data.level === 1){
 proData.push(data);
 }
 if (data.level === 2){
 cityData.push(data);
 }
 if (data.level === 3){
 distData.push(data);
 }
 })
 fillselect(proSelect,proData);
 // 監(jiān)聽(tīng)一級(jí)省份選擇列表change事件，更新二級(jí)城市列表
 proSelect.addEventListener("change",function(event){
 var val = event.target.value;
 var list = [];
 cityData.forEach(function(d){
 if (d.sheng === val) {
 list.push(d);
 }
 })
 fillselect(citySelect,list);
 })
 // 監(jiān)聽(tīng)二級(jí)城市選擇列表change事件，更新三級(jí)區(qū)域列表
 citySelect.addEventListener("change",function(event){
 var val = event.target.value;
 var curIndex = event.target.selectedIndex;
 curCity = event.target[curIndex].dataset.di;
 console.log(event.target,curCity);
 var list = [];
 distData.forEach(function(d){
 if (d.di === curCity && d.sheng === val) {
 list.push(d);
 }
 })
 fillselect(districtSelect,list);
 })
 </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

使用JQuery進(jìn)行跨域請(qǐng)求
JQuery 進(jìn)行跨域請(qǐng)求實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-01-01
JavaScript實(shí)現(xiàn)簡(jiǎn)單鐘表時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單鐘表時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
基于Bootstrap模態(tài)對(duì)話(huà)框只加載一次 remote 數(shù)據(jù)的解決方法
下面小編就為大家?guī)?lái)一篇基于Bootstrap模態(tài)對(duì)話(huà)框只加載一次 remote 數(shù)據(jù)的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
JS如何獲取URL中的Query參數(shù)
這篇文章主要介紹了JS如何獲取URL中的Query參數(shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
js實(shí)現(xiàn)單張圖片平移切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)單張圖片平移切換效果，一張圖移動(dòng)到左邊以后，從底部移回最右，等待下一次循環(huán)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
JavaScript代碼調(diào)試方法實(shí)例小結(jié)
這篇文章主要介紹了JavaScript代碼調(diào)試方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript錯(cuò)誤信息的處理與代碼調(diào)試相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
小程序?qū)崿F(xiàn)手寫(xiě)簽名功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)手寫(xiě)簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JavaScript生成隨機(jī)字符串的方法
這篇文章主要介紹了JavaScript生成隨機(jī)字符串的方法,涉及javascript中random的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-03-03
IE11下CKEditor在Bootstrap Modal中下拉問(wèn)題的解決
這篇文章主要介紹了IE11下CKEditor在Bootstrap Modal中下拉問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
Solidity可支付函數(shù)使用示例詳解
這篇文章主要為大家介紹了Solidity可支付函數(shù)的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05