<!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">
function CLASS_LIANDONG_YAO(array){
//數組，聯動的數據源
this.array=array;
this.indexName='';
this.obj='';
//設置子SELECT
// 參數：當前onchange的SELECT ID，要設置的SELECT ID
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(){
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>
本文摘自:http://www.alixixi.com/Dev/HTML/jsrun/but/2008/2008082680569.html