js 实现省市区三级联动菜单效果pc软件 文章资讯 手机软件

您当前的位置→图文中心网站专题网站建设js 实现省市区三级联动菜单效果

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


2017/2/20 14:38:49 编辑:admin 来源:本站整理 

效果如下:

代码如下:

<!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使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
  • ASP 、PHP、JSP三者都是面向Web服务器的技术,客户端浏览器不需要任何附加的软件支持。...
  • IIS7.5中对所有请求响应的JSON数据进行GZIP编码
  • js图片等比例缩放
  • JS批量替换内容中关键词为超链接
  • 原生JS实现《别踩白块》游戏(兼容IE)
  • Bootstrap jquery.twbsPagination.js动态页码分页实例代码
  • js 实现省市区三级联动菜单效果
  • 发表评论
    阅读排行
    网站帮助 - 广告合作 - 下载声明 - 网站地图