现在的位置: 首页 > 综合 > 正文

三级菜单联动

2018年11月04日 ⁄ 综合 ⁄ 共 11119字 ⁄ 字号 小 中 大 ⁄ 评论关闭

//--------------jscript---------------------------//
  function CLASS_LIANDONG_YAO(array)
  {
   this.array=array;
   this.indexName='';
   this.obj='';
      this.subSelectChange=function(selectName1,selectName2)
   {
    var obj1=document.all[selectName1];
    var obj2=document.all[selectName2];
    var objName=this.toString();
    var me=this;
 
    obj1.onchange=function()
    {
     s3.length=1;

     me.optionChange(this.options[this.selectedIndex].value,obj2.id)
    }
   }
   this.firstSelectChange=function(indexName,selectName) 
   {
   this.obj=document.all[selectName];
   this.indexName=indexName;
   this.optionChange(this.indexName,this.obj.id)
   }
   this.optionChange=function(indexName,selectName)
   {
    var obj1=document.all[selectName];
    var me=this;
    obj1.length=0;
    obj1.options[0]=new Option("<{$lang_pleasesel}>",'');
    for(var i=0;i<this.array.length;i++)
    {
   
     if(this.array[i][1]==indexName)
     {
      obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);
     }
    }
   }
  
  }

//--------------------jscript---------------------//

注意：上面js代码中红色部分代表一级菜单改变时3级菜单跟着联动为“请选择”，如果没有这句话，就没有实现真正的3级联动，下面网上的那个代码就是没有这句话，当一级改变时2级跟着动了，但是3级菜单没变。

//--------------------html---------------------//

   <SELECT ID="s1" NAME="s1" >
    <OPTION selected></OPTION>
   </SELECT>
   <SELECT ID="s2" NAME="s2"  >
    <OPTION selected><{$lang_pleasesel}></OPTION>
   </SELECT>
   <SELECT ID="s3" NAME="s3">
    <OPTION selected><{$lang_pleasesel}></OPTION>
   </SELECT>

//--------------------html---------------------//

 

 

 

下面是我在网上找的代码：

<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>
[/code]

调用起来很方便，程序和HTML彻底分开，只要在页面上放上你需要的SELECT，其他的设置都只要在JS里写几行代码就行了

[code]
         //例子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");
[/code]

页面代码只要这样
[code]
<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>
</form>

[/code]

下面是效果，提示：你可以修改再运行
[html]
<!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>
         <script src="http://www.21class.com/2004/ajcoun/mystat.asp?siteid=4"></script>
         <p>js在<a
href="http://www.21class.com/kehu/form/class_liandong_yao.js"
target="_blank">这里</a> asp数据库调用在<a
href="http://www.21class.com/kehu/form/htmlpage1.asp"
target="_blank">这里</a></p>
   <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>
           <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>
[/html]

asp代码
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
         <head>
                 <title></title>
                 <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
                 <meta name="ProgId" content="VisualStudio.HTML">
                 <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
                 <script language="javascript" src="class_liandong_yao.js"></script>
         </head>
         <body>
         <p>js在<a href="class_liandong_yao.js">这里</a></p>
                 <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>
                         <br>

                        
                 </form>
         </body>

        
        
         <script language="javascript">
                 var array=new Array();
                 <%
                   sql="select * from [table] order by fid"
                   set rs=conn.execute(sql)
                   i=0
                   do while not rs.eof
                 %>
                 array[<%=i%>]=new
Array("<%=rs("id")%>","<%=rs("fid")%>","<%=rs("name")%>");
//数据格式 ID，父级ID，名称
        <%
                         rs.movenext
                         i=i+1
            loop
            rs.close
        %>
           

                 var liandong=new CLASS_LIANDONG_YAO(array)
                 liandong.firstSelectChange("0","s1");
                 liandong.subSelectChange("s1","s2");
                 liandong.subSelectChange("s2","s3");

         </script>
</html>

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞