JavaScript实现三级联动菜单效果


Posted in Javascript onAugust 16, 2017

三级联动考察的应该是对于数据的处理,只要清楚其中的关系,再多几级都是一样的:

html部分:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>3级联动菜单</title>
 <script>
 var region = {
  广东:
  {
  "广州":["广州1","广州2","广州3"],

  "珠海":["珠海1","珠海2","珠海3"],

  "佛山":["佛山1"]
  },
  湖南:
  {
  "常德":["石门","桃源","临澧","汉寿"],

  "益阳":["益阳1","益阳2","益阳3"]
  }
 }
 </script>
</head>
 <body>

 <select id="province" onchange="change(this.value);">
  <option>请选择省份</option>
 </select>

 <select id="city" onchange="countyChange(this.value);">
  <option>请选择地市</option>
 </select>

 <select id="county">
  <option>请选择县城</option>
 </select>
 <script src='test.js'></script>
 </body>
</html>

js部分:

var province = document.querySelector("#province");
 var city = document.querySelector("#city");
 var county = document.querySelector("#county");
 //二级联动不用定义你选的省份,直接用省份(key)来决定下面的市(value)值
 var provinceName = null;

 for (ele in region){
 var op = new Option(ele , ele , false , false); //new Option("文本","值",true,true).后面两个true分别表示默认被选中和有效
 //console.log(op);
 province.options[province.length] = op;
 }

 var change = function(src){
 city.innerHTML = "";
 if(src === '请选择省份'){
  var op = new Option('请选择地市' , '请选择地市' , false , false);
  city.options[0] = op;
 }else{
  for (index in region[src]){
  //console.log(index);
  var op = new Option(index , index , false , false);
  city.options[city.length] = op;
  }
 }
 //记住选择省份的值
 provinceName=src;
 countyChange(city.value)
 }

 var countyChange = function(src2){
 county.innerHTML = "";
 if(src2 === '请选择地市'){
  var op = new Option('请选择县城','请选择县城', false , false);
  county.options[0] = op;
 }else{
  for (index in region[provinceName][src2]){
  //console.log(index);
  var op = new Option(region[provinceName][src2][index] , region[provinceName][src2][index] , false , false);
  county.options[county.length] = op;
  }
 }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
ionic3 懒加载
Aug 16 #Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 #Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 #Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 #Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 #Javascript
vue实现留言板todolist功能
Aug 16 #Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 #Javascript
You might like
咖啡知识大全
2021/03/03 新手入门
php匹配字符中链接地址的方法
2014/12/22 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
详解Python Socket网络编程
2016/01/05 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python读写配置文件操作示例
2019/07/03 Python
在python中使用nohup命令说明
2020/04/16 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
业务代表的岗位职责
2013/11/16 职场文书
语文教育专业推荐信范文
2013/11/25 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
利用Python实现模拟登录知乎
2022/05/25 Python
Python数组变形的几种实现方法
2022/05/30 Python