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 相关文章推荐
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
React快速入门教程
Jan 17 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
记录一次开发微信网页分享的步骤
May 07 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连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
vue实现分页组件
2020/06/16 Javascript
python获取磁盘号下盘符步骤详解
2019/06/19 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
python 代码运行时间获取方式详解
2020/09/18 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
Android面试题及答案
2015/09/04 面试题
2014年大学生党课心得体会范文
2014/03/29 职场文书
会议室标语
2014/06/21 职场文书
财务工作检讨书
2014/10/29 职场文书
个人借条范本
2015/05/25 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
Python 如何安装Selenium
2021/05/06 Python
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Nginx配置https的实现
2021/11/27 Servers