IT资讯/综合软件下载站!┆ 最新软件 最新文章 最新手机 UFO外星人 网站分类

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

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


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

效果如下:

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

代码如下:

<!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实现轮播图的示例代码

相关文章
  • ·js图片等比例缩放
  • ·[图文]JS批量替换内容中关键词为超链接
  • ·[图文]原生JS实现《别踩白块》游戏(兼容IE)
  • ·[图文]Bootstrap jquery.twbsPagination.js动态页码分页实例代码
  • ·[图文]js 实现省市区三级联动菜单效果
  • ·[图文]原生js实现轮播图的示例代码
  • ·[图文]js事件冒泡与事件捕获详解
  • ·[图文]BootStrap Jstree 树形菜单的增删改查的实现源码
  • 发表评论
    栏目列表
    阅读排行
    网站帮助 - 广告合作 - 下载声明 - 网站地图