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 相关文章推荐
js 上传图片预览问题
Dec 06 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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独立Session数据库存储操作类分享
2014/06/11 PHP
php分页函数完整实例代码
2014/09/22 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
关于js datetime的那点事
2011/11/15 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
python装饰器与递归算法详解
2016/02/18 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
详解python破解zip文件密码的方法
2020/01/13 Python
pandas分批读取大数据集教程
2020/06/06 Python
浅析Python中字符串的intern机制
2020/10/03 Python
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
银行自荐信范文
2013/10/07 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
公司人力资源管理制度
2015/08/05 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
欧元符号 €
2022/02/17 杂记