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 相关文章推荐
鼠标经过显示二级菜单js特效
Aug 13 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 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远程调试之XDEBUG
2015/12/29 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
JavaScript实现连连看连线算法
2019/01/05 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
Python Socket编程入门教程
2014/07/11 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python numpy元素的区间查找方法
2018/11/14 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
工地门卫岗位职责范本
2014/07/01 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
分享Python获取本机IP地址的几种方法
2022/03/17 Python