微信报名小程序开发_js 完成省市区三级联动菜单

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!