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 相关文章推荐
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
React事件处理的机制及原理
Dec 03 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
react native 仿微信聊天室实例代码
Sep 17 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
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
PHP 类与构造函数解析
2017/02/06 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
区域总监的岗位职责
2013/11/21 职场文书
酒店端午节活动方案
2014/08/26 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python