JS多级连动菜单

更新时间：2007年01月10日 00:00:00 作者：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>     <head>   <title>JS联动下拉框</title>   <meta name="GENERATOR" content="Microsoft FrontPage 4.0">   <meta name="ProgId" content="FrontPage.Editor.Document">   <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">   <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">       &nbsp;       <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>                     <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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS多级连动菜单

js post方式传递提交的实现代码
一套提交代码，全部由js dom操作自动创建于提交。喜欢的朋友可以参考下。
2010-05-05
Javascript实现图片不间断滚动的代码
这篇文章主要分享一段js图片不间断滚动的代码,蛮优秀的,需要的朋友可以参考下。
2016-06-06
js 限制表单输入长度汉字为两个字符
该效果是继检测表单输入长度显示剩余可输入字数之后，在他的基础上整合的小有差别的一个效果，希望方便朋友们使用。
2011-07-07
28个JS验证函数收集
做网站的时候，很多地方都是由表单提交组成的，但是有提交的地方都要有验证。客户端验证最简单的方法就是使用JS自定义函数。这个文档包含平时常用的28个验证函数，还有验证函数几种使用方法。
2010-03-03
让input不可点击的另一种方法
一般对于input的不可点击，不可输入，不可修改等都是用disable=true这一属性，下面的方法，是通过js控制的，各有好处。
2009-02-02
表单提交验证类
表单提交验证类...
2006-07-07
javascript radio list的实现细节(多浏览器兼容)
非常不错的radio list的效果实现代码
2008-12-12
一段实时更新的时间代码
一段实时更新的时间代码...
2006-07-07
js+css使文本框自动适应内容的高度
使文本框自动适应内容的高度的实现代码，需要的朋友可以参考下。
2010-05-05
js验证符合用户体验的网页表单特效
用CSS和JS设计的符合用户体验的表单。大家可以在自己的网页里面用用，自己感觉非常不错的一种效果。
2008-10-10

JS多级连动菜单

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具