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实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
node.js实现登录注册页面
Apr 08 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
vxe-table vue table 表格组件功能
May 26 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
基于JavaScript实现简单的轮播图
Mar 03 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自定义函数实现代码
2011/12/30 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python操作json数据的一个简单例子
2014/04/17 Python
Python去除列表中重复元素的方法
2015/03/20 Python
Python出现segfault错误解决方法
2016/04/16 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
Python属性和内建属性实例解析
2020/01/14 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
传媒专业推荐信范文
2013/11/23 职场文书
建筑人员岗位职责
2013/12/25 职场文书
餐厅总厨求职信
2014/03/04 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
2014年财务科工作总结
2014/11/11 职场文书
分享python函数常见关键字
2022/04/26 Python