JavaScript实现三级联动菜单实例代码


Posted in Javascript onJune 26, 2017

本文给大家分享的是使用javascript实现的一个简单的三级联动菜单,非常简单实用,有需要的小伙伴过来参考下吧。

用javascript制作的一个简单三级联动,非常简单实用

<!DOCTYPE html>

<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  省:
  <select style="width: 100px;" id="pre" onchange="chg(this);">
   <option value="-1">请选择</option>
  </select>
  市:
  <select style="width: 100px;" id="city" onchange="chg2(this)" ;></select>
  区:
  <select style="width: 100px;" id="area"></select>
 </body>
 <script>

   //声明省
  var pres = ["北京", "上海", "山东"]; //直接声明Array
   //声明市
  var cities = [

   ["东城", "昌平", "海淀"],
   ["浦东", "高区"],
   ["济南", "青岛"]
  ];

  var areas = [

    [
     ["东城1", "东城2", "东城3"],
     ["昌平1", "昌平2", "昌平3"],
     ["海淀1", "海淀2", "海淀3"]
    ],

    [
     ["浦东1", "浦东2", "浦东3"],
     ["高区1", "高区2", "高区3"]

    ],

    [
     ["济南1", "济南2"],
     ["青岛1", "青岛2"]
    ]

   ]

   //设置一个省的公共下标

  var pIndex = -1;
  var preEle = document.getElementById("pre");
  var cityEle = document.getElementById("city");
  var areaEle = document.getElementById("area");
   //先设置省的值

  for (var i = 0; i < pres.length; i++) {
   //声明option.<option value="pres[i]">Pres[i]</option>
   var op = new Option(pres[i], i);
   //添加
   preEle.options.add(op);
  }

  function chg(obj) {
   if (obj.value == -1) {
    cityEle.options.length = 0;
    areaEle.options.length = 0;
   }

   //获取值
   var val = obj.value;
   pIndex = obj.value;
   //获取ctiry
   var cs = cities[val];
   //获取默认区
   var as = areas[val][0];
   //先清空市
   cityEle.options.length = 0;
   areaEle.options.length = 0;
   for (var i = 0; i < cs.length; i++) {
    var op = new Option(cs[i], i);
    cityEle.options.add(op);

   }

   for (var i = 0; i < as.length; i++) {
    var op = new Option(as[i], i);
    areaEle.options.add(op);

   }

  }

  function chg2(obj) {
   var val = obj.selectedIndex;
   var as = areas[pIndex][val];
   areaEle.options.length = 0;
   for (var i = 0; i < as.length; i++) {

    var op = new Option(as[i], i);

    areaEle.options.add(op);

   }

  }

 </script>
</html>

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

Javascript 相关文章推荐
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
js在HTML的三种引用方式详解
Aug 29 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
jQuery实现frame之间互通的方法
Jun 26 #jQuery
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 #Javascript
jQuery回调方法使用示例
Jun 26 #jQuery
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 #Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 #Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 #Javascript
浅谈JS如何实现真正的对象常量
Jun 25 #Javascript
You might like
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
Java编程面试题
2016/04/04 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
活动总结怎么写
2014/04/28 职场文书
保研推荐信
2014/05/09 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
Redis基本数据类型Set常用操作命令
2022/06/01 Redis