js實現省市區三級聯動菜單效果

來源：懂視網責編：小OO 時間：2020-11-27 20:24:53

js實現省市區三級聯動菜單效果

效果如下：代碼如下：<；，proData)；// 監聽一級省份選擇列表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)；}) // 監聽二級城市選擇列表change事件，更新三級區域列表 citySelect.addEventListener("；change"。

推薦度：

點擊下載本文 文檔為doc格式

導讀效果如下：代碼如下：<；，proData)；// 監聽一級省份選擇列表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)；}) // 監聽二級城市選擇列表change事件，更新三級區域列表 citySelect.addEventListener("；change"。

本文主要分享了js實現省市區三級聯動菜單效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧

效果如下：

js 實現省市區三級聯動菜單效果

代碼如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>省市區三級聯動</title>
</head>
<body>
 <form>
 <select id="province">
 <option>請選擇省份</option>
 </select>
 <select id="city">
 <option>請選擇城市</option>
 </select>
 <select id="district">
 <option>請選擇區域</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 = "";
 // 封裝更新選擇列表函數
 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);
 })
 }
 // 將數據按省、市、地區分別存儲
 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);
 // 監聽一級省份選擇列表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);
 })
 // 監聽二級城市選擇列表change事件，更新三級區域列表
 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>

更多js 實現省市區三級聯動菜單效果相關文章請關注PHP中文網！

用php實現城市地區三級聯動附帶數據庫

實現ajax三級聯動下拉菜單的實例代碼

Yii2實現中國省市區三級聯動實例

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com