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检测页面是否缩放的小例子
May 16 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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中的正规表达式(一)
2006/10/09 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python3多线程爬虫实例讲解代码
2018/01/05 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
英语专业毕业生自我鉴定
2013/11/09 职场文书
关于工资低的辞职信
2014/01/14 职场文书
环境整治工作方案
2014/05/18 职场文书
2014年政协工作总结
2014/12/09 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
立春观后感
2015/06/18 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
浅谈Python协程asyncio
2021/06/20 Python