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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
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 session 错误
2009/05/21 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
python类型强制转换long to int的代码
2013/02/10 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
基于python操作ES实例详解
2019/11/16 Python
Python字典底层实现原理详解
2019/12/18 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
标记环介质访问控制协议
2016/03/27 面试题
工程力学专业自荐信范文
2014/03/17 职场文书
投标保密承诺书
2014/05/19 职场文书
庆祝国庆节标语
2014/10/09 职场文书
法律意见书范文
2015/05/20 职场文书
葬礼主持词
2015/07/02 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
Python import模块的缓存问题解决方案
2021/06/02 Python