js 实现省市区三级联动菜单效果

 

 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);

 })