页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

JS多级连动菜单

发布：dxy 发布日期：2007-1-10 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!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"> 
        
      <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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：JS多级连动菜单