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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
js获取和设置属性的方法
Feb 20 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
用node.js写一个jenkins发版脚本
May 21 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设计模式 Factory(工厂模式)
2011/06/26 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
pycharm远程调试openstack的图文教程
2017/11/21 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
JNI的定义
2012/11/25 面试题
给排水专业应届生求职信
2013/10/12 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
社区清明节活动总结
2014/07/04 职场文书
群众路线表态发言材料
2014/10/17 职场文书
教师党员整改措施
2014/10/24 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
世界红十字日活动总结
2015/02/10 职场文书
python 中的@运算符使用
2021/05/26 Python
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
mysql全面解析json/数组
2022/07/07 MySQL