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)文章

javascript頁(yè)面倒計(jì)時(shí)實(shí)例
這篇文章主要介紹了javascript頁(yè)面倒計(jì)時(shí)實(shí)現(xiàn)方法,可實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面倒計(jì)時(shí)及自動(dòng)提交表單功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-07-07
使用Chrome調(diào)試JavaScript的斷點(diǎn)設(shè)置和調(diào)試技巧
這篇文章主要介紹了使用Chrome調(diào)試JavaScript的斷點(diǎn)設(shè)置和調(diào)試技巧,需要的朋友可以參考下
2014-12-12
JS利用循環(huán)解決的一些常見(jiàn)問(wèn)題總結(jié)
循環(huán)輸出問(wèn)題是面試中經(jīng)典的題目,一般會(huì)給出代碼,讓我們解釋原因,并給出若干解決方案,下面這篇文章主要給大家介紹了關(guān)于JS利用循環(huán)解決的一些常見(jiàn)問(wèn)題,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
微信小程序?qū)崿F(xiàn)錨點(diǎn)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)錨點(diǎn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
JS使用正則實(shí)現(xiàn)去掉字符串左右空格的方法
這篇文章主要介紹了JS使用正則實(shí)現(xiàn)去掉字符串左右空格的方法,結(jié)合實(shí)例形式分析了JS針對(duì)首尾匹配及空格匹配的簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-12-12
各瀏覽器對(duì)link標(biāo)簽onload/onreadystatechange事件支持的差異分析
各瀏覽器對(duì)link標(biāo)簽onload/onreadystatechange事件支持的差異分析，需要的朋友可以參考下。
2011-04-04
微信小程序?qū)崿F(xiàn)選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果
本篇文章主要介紹了原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
ES7中await如何優(yōu)雅的捕獲異常詳解
異常捕獲相信對(duì)大家來(lái)說(shuō)并不陌生,下面這篇文章主要給大家介紹了關(guān)于ES7中await如何優(yōu)雅的捕獲異常的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
不同瀏覽器javascript變量作用域的處理方法
javascript變量作用域在不同瀏覽器的實(shí)現(xiàn)處理代碼
2008-09-09