<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS聯(lián)動下拉框</title>
<script language="javascript" >
/* 
** ====================================
** 類名：CLASS_LIANDONG_YAO 
** 功能：多級連動菜單 
** 作者：YAODAYIZI 
**/  
 function CLASS_LIANDONG_YAO(array)
 {
 //數(shù)組，聯(lián)動的數(shù)據(jù)源
  this.array=array; 
  this.indexName='';
  this.obj='';
  //設(shè)置子SELECT
 // 參數(shù)：當(dāng)前onchange的SELECT ID，要設(shè)置的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)
 }
  }
  //設(shè)置第一個SELECT
 // 參數(shù)：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>
  <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-------------------------------------------------------------
//數(shù)據(jù)源
var array=new Array();
 array[0]=new Array("華南地區(qū)","根目錄","華南地區(qū)"); //數(shù)據(jù)格式 ID，父級ID，名稱
 array[1]=new Array("華北地區(qū)","根目錄","華北地區(qū)");
 array[2]=new Array("上海","華南地區(qū)","上海");
 array[3]=new Array("廣東","華南地區(qū)","廣東");
 array[4]=new Array("徐家匯","上海","徐家匯");
 array[5]=new Array("普托","上海","普托"); 
 array[6]=new Array("廣州","廣東","廣州");
 array[7]=new Array("湛江","廣東","湛江");
 //--------------------------------------------
 //這是調(diào)用代碼
 var liandong=new CLASS_LIANDONG_YAO(array) //設(shè)置數(shù)據(jù)源
 liandong.firstSelectChange("根目錄","s1"); //設(shè)置第一個選擇框
 liandong.subSelectChange("s1","s2"); //設(shè)置子級選擇框
 liandong.subSelectChange("s2","s3");
 //例子2-------------------------------------------------------------
 //數(shù)據(jù)源 
 var array2=new Array();//數(shù)據(jù)格式 ID，父級ID，名稱
 array2[0]=new Array("測試測試","根目錄","測試測試"); 
 array2[1]=new Array("華北地區(qū)","根目錄","華北地區(qū)");
 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");
 //--------------------------------------------
 //這是調(diào)用代碼
 //設(shè)置數(shù)據(jù)源
 var liandong2=new CLASS_LIANDONG_YAO(array2);
 //設(shè)置第一個選擇框
 liandong2.firstSelectChange("根目錄","x1");
 //設(shè)置子選擇框
 liandong2.subSelectChange("x1","x2")
 liandong2.subSelectChange("x2","x3")
 liandong2.subSelectChange("x3","x4")
 liandong2.subSelectChange("x4","x5")
</script>
</html>

希望本文所述對大家的JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: