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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
react中Suspense的使用详解
Sep 01 Javascript
js实现自动播放匀速轮播图
Feb 06 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中设置时区方法小结
2012/06/03 PHP
laravel自定义分页效果
2017/07/23 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
node.js的事件机制
2017/02/08 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Django实现文件上传下载功能
2019/10/06 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
农救科工作职责
2013/11/27 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
如何做好工作总结!
2019/04/10 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
检讨书之工作不认真
2019/08/14 职场文书
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
Java数据结构之堆(优先队列)
2022/05/20 Java/Android
Nginx安装配置详解
2022/06/25 Servers