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中的对象和数组的应用技巧
Jan 07 Javascript
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
JavaScript面向对象编程
Mar 02 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
详解React服务端渲染从入门到精通
Mar 28 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 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中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
用javascript实现倒计时效果
2021/02/09 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python正则表达式re模块详细介绍
2014/05/29 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
求职信格式范本
2013/11/15 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
高中学生期末评语
2014/04/25 职场文书
体现团队精神的口号
2014/06/06 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB