JS简单实现多级Select联动菜单效果代码


Posted in Javascript onSeptember 06, 2015

本文实例讲述了JS简单实现多级Select联动菜单效果代码。分享给大家供大家参考。具体如下:

JS联动菜单,简单代码实现JS多级Select联动菜单,也就是大家常用的一款菜单,Select联动状态的菜单,网页上经常见到的效果,希望大家能用得上。

运行效果截图如下:

JS简单实现多级Select联动菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS联动下拉框</title>
<script language="javascript" >
/* 
** ====================================
** 类名:CLASS_LIANDONG_YAO 
** 功能:多级连动菜单 
** 作者:YAODAYIZI 
**/  
 function CLASS_LIANDONG_YAO(array)
 {
 //数组,联动的数据源
  this.array=array; 
  this.indexName='';
  this.obj='';
  //设置子SELECT
 // 参数:当前onchange的SELECT ID,要设置的SELECT ID
 this.subSelectChange=function(selectName1,selectName2)
  {
  //try
  //{
 var obj1=document.all[selectName1];
 var obj2=document.all[selectName2];
 var objName=this.toString();
 var me=this;
 obj1.onchange=function()
 {
  me.optionChange(this.options[this.selectedIndex].value,obj2.id)
 }
  }
  //设置第一个SELECT
 // 参数:indexName指选中项,selectName指select的ID
  this.firstSelectChange=function(indexName,selectName) 
  {
  this.obj=document.all[selectName];
  this.indexName=indexName;
  this.optionChange(this.indexName,this.obj.id)
  }
 // indexName指选中项,selectName指select的ID
  this.optionChange=function (indexName,selectName)
  {
 var obj1=document.all[selectName];
 var me=this;
 obj1.length=0;
 obj1.options[0]=new Option("请选择",'');
 for(var i=0;i<this.array.length;i++)
 { 
  if(this.array[i][1]==indexName)
  {
  //alert(this.array[i][1]+" "+indexName);
 obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);
  }
 }
  } 
 }
 </script>
</head>
<body>
<form name="form1" method="post">
   
  <SELECT ID="s1" NAME="s1" >
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="s2" NAME="s2" >
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="s3" NAME="s3">
 <OPTION selected></OPTION>
  </SELECT>
  <br>
  <br><br>
  <SELECT ID="x1" NAME="x1" >
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="x2" NAME="x2" >
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="x3" NAME="x3">
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="x4" NAME="x4">
 <OPTION selected></OPTION>
  </SELECT>
  <SELECT ID="x5" NAME="x5">
 <OPTION selected></OPTION>
  </SELECT>
 </form>
 </body>
<script language="javascript">
//例子1-------------------------------------------------------------
//数据源
var array=new Array();
 array[0]=new Array("华南地区","根目录","华南地区"); //数据格式 ID,父级ID,名称
 array[1]=new Array("华北地区","根目录","华北地区");
 array[2]=new Array("上海","华南地区","上海");
 array[3]=new Array("广东","华南地区","广东");
 array[4]=new Array("徐家汇","上海","徐家汇");
 array[5]=new Array("普托","上海","普托"); 
 array[6]=new Array("广州","广东","广州");
 array[7]=new Array("湛江","广东","湛江");
 //--------------------------------------------
 //这是调用代码
 var liandong=new CLASS_LIANDONG_YAO(array) //设置数据源
 liandong.firstSelectChange("根目录","s1"); //设置第一个选择框
 liandong.subSelectChange("s1","s2"); //设置子级选择框
 liandong.subSelectChange("s2","s3");
 //例子2-------------------------------------------------------------
 //数据源 
 var array2=new Array();//数据格式 ID,父级ID,名称
 array2[0]=new Array("测试测试","根目录","测试测试"); 
 array2[1]=new Array("华北地区","根目录","华北地区");
 array2[2]=new Array("上海","测试测试","上海");
 array2[3]=new Array("广东","测试测试","广东");
 array2[4]=new Array("徐家汇","上海","徐家汇");
 array2[5]=new Array("普托","上海","普托"); 
 array2[6]=new Array("广州","广东","广州");
 array2[7]=new Array("湛江","广东","湛江");
 array2[8]=new Array("不知道","湛江","不知道");
 array2[9]=new Array("5555","湛江","555");
 array2[10]=new Array("++++","不知道","++++");
 array2[11]=new Array("111","徐家汇","111");
 array2[12]=new Array("222","111","222");
 array2[13]=new Array("333","222","333");
 //--------------------------------------------
 //这是调用代码
 //设置数据源
 var liandong2=new CLASS_LIANDONG_YAO(array2);
 //设置第一个选择框
 liandong2.firstSelectChange("根目录","x1");
 //设置子选择框
 liandong2.subSelectChange("x1","x2")
 liandong2.subSelectChange("x2","x3")
 liandong2.subSelectChange("x3","x4")
 liandong2.subSelectChange("x4","x5")
</script>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
JavaScript的继承实现小结
May 07 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 #Javascript
简单谈谈javascript Date类型
Sep 06 #Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 #Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 #Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 #Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 #Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 #Javascript
You might like
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
python批量生成本地ip地址的方法
2015/03/23 Python
Python运算符重载用法实例
2015/05/28 Python
Python函数中不定长参数的写法
2019/02/13 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
python调用接口的4种方式代码实例
2019/11/19 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
Python turtle库的画笔控制说明
2020/06/28 Python
运行Python编写的程序方法实例
2020/10/21 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
50岁生日感言
2014/01/23 职场文书
代办委托书怎样写
2014/04/08 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS