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


Posted in Javascript onFebruary 20, 2017

效果如下:

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>

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

Javascript 相关文章推荐
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
vue实现拖拽效果
Dec 23 Javascript
js事件冒泡与事件捕获详解
Feb 20 #Javascript
关于ES6的六个小特性(二)
Feb 20 #Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 #Javascript
JS批量替换内容中关键词为超链接
Feb 20 #Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 #Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 #Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 #Javascript
You might like
基于PHP静态类的原罪详解
2013/05/06 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php session的应用详细介绍
2017/03/22 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
200行自定义python异步非阻塞Web框架
2017/03/15 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
python实现简单坦克大战
2020/03/27 Python
Python实现代码块儿折叠
2020/04/15 Python
后勤主管工作职责
2013/12/07 职场文书
学徒工职责
2014/03/06 职场文书
《分一分》教学反思
2014/04/13 职场文书
公司合作协议书范本
2014/04/18 职场文书
文明寝室申报材料
2014/05/12 职场文书
春节超市活动方案
2014/08/14 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
律师函格式范本
2015/05/27 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Python基础之元编程知识总结
2021/05/23 Python
浅析Python实现DFA算法
2021/06/26 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android
python中urllib包的网络请求教程
2022/04/19 Python
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL