欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年02月20日 10:18:52   作者：nick906  
本文主要分享了js實(shí)現(xiàn)省市區(qū)三級聯(lián)動菜單效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧

效果如下：

代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>省市區(qū)三級聯(lián)動</title>
</head>
<body>
 <form>
 <select id="province">
 <option>請選擇省份</option>
 </select>
 <select id="city">
 <option>請選擇城市</option>
 </select>
 <select id="district">
 <option>請選擇區(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ū)分別存儲
 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)聽一級省份選擇列表change事件，更新二級城市列表
 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)聽二級城市選擇列表change事件，更新三級區(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>

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

相關(guān)文章

  • 使用JQuery進(jìn)行跨域請求

    使用JQuery進(jìn)行跨域請求

    JQuery 進(jìn)行跨域請求實(shí)現(xiàn)代碼，需要的朋友可以參考下。
    2010-01-01
  • JavaScript實(shí)現(xiàn)簡單鐘表時鐘

    JavaScript實(shí)現(xiàn)簡單鐘表時鐘

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單鐘表時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-10-10
  • 基于Bootstrap模態(tài)對話框只加載一次 remote 數(shù)據(jù)的解決方法

    基于Bootstrap模態(tài)對話框只加載一次 remote 數(shù)據(jù)的解決方法

    下面小編就為大家?guī)硪黄贐ootstrap模態(tài)對話框只加載一次 remote 數(shù)據(jù)的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • JS如何獲取URL中的Query參數(shù)

    JS如何獲取URL中的Query參數(shù)

    這篇文章主要介紹了JS如何獲取URL中的Query參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • js實(shí)現(xiàn)單張圖片平移切換效果

    js實(shí)現(xiàn)單張圖片平移切換效果

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)單張圖片平移切換效果，一張圖移動到左邊以后，從底部移回最右，等待下一次循環(huán)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-10-10
  • JavaScript代碼調(diào)試方法實(shí)例小結(jié)

    JavaScript代碼調(diào)試方法實(shí)例小結(jié)

    這篇文章主要介紹了JavaScript代碼調(diào)試方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript錯誤信息的處理與代碼調(diào)試相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • 小程序?qū)崿F(xiàn)手寫簽名功能

    小程序?qū)崿F(xiàn)手寫簽名功能

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)手寫簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • JavaScript生成隨機(jī)字符串的方法

    JavaScript生成隨機(jī)字符串的方法

    這篇文章主要介紹了JavaScript生成隨機(jī)字符串的方法,涉及javascript中random的使用技巧,非常具有實(shí)用價值,需要的朋友可以參考下
    2015-03-03
  • IE11下CKEditor在Bootstrap Modal中下拉問題的解決

    IE11下CKEditor在Bootstrap Modal中下拉問題的解決

    這篇文章主要介紹了IE11下CKEditor在Bootstrap Modal中下拉問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-09-09
  • Solidity可支付函數(shù)使用示例詳解

    Solidity可支付函數(shù)使用示例詳解

    這篇文章主要為大家介紹了Solidity可支付函數(shù)的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-05-05

最新評論