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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
捕获关闭窗口的脚本
2009/01/10 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python实现通过shelve修改对象实例
2014/09/26 Python
Python实现一个简单的MySQL类
2015/01/07 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python语言描述随机梯度下降法
2018/01/04 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
python3实现绘制二维点图
2019/12/04 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Footshop法国:购买运动鞋
2020/01/19 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
大三在校生电子商务求职信
2013/10/29 职场文书
最新教师自我评价分享
2013/11/12 职场文书
商务日语毕业生自荐信范文
2013/11/14 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis