--------------------------------------------------------------------
在網上找到的代碼，現在正在用，一定可以用。稍加改動，可以從數據庫取數據進行聯動，認為比較經典。
<html>
?<head>
? <title>JS聯動下拉框</title>
? <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>
? ?<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>
-----------------------------------------------------------------
注：只要把var array=new Array();的值改為從數據庫中取到的值可以和數據庫連接。例子如下。可以仿照進行更改
<script language="javascript">
//數據源
? var array=new Array();
?<%
?int count = 0;
String bm_id="",bm_name="",yh_id="",yh_name="";
behdResultSet rs1=null,rs2=null;
String s1=null,s2=null;
s1="select dept_id,dept_name from scm_dept001";
s2="select dept_id,user_id,user_name from scm_user001 where dept_id!=' ' and dept_id!='null'";
?rs1 = mdb.executeQueryForPage(s1,1,100);//讀取數據
while(rs1.next())
{
?bm_id=rs1.getString("dept_id");
?bm_name=rs1.getString("dept_name");
%>
array[<%=count%>] = new Array("<%=bm_id%>","根目錄","<%=bm_id%>-<%=bm_name%>");//產生數組
<%
??????? count = count + 1;
}
rs2=mdb.executeQueryForPage(s2,1,100);
while(rs2.next()){
?yh_id=rs2.getString("user_id");
?if(yh_id==null){
??yh_id="";
??}
?bm_id=rs2.getString("dept_id");
?if(bm_id==null){
??bm_id="";
??}
?yh_name=rs2.getString("user_name");
?if(yh_name==null){
??yh_name="";
??}
%>
array[<%=count%>] = new Array("<%=yh_id%>","<%=bm_id%>","<%=yh_id%>-<%=yh_name%>");
<%
?count = count + 1;
}
%>
? //--------------------------------------------
? //這是調用代碼
? var liandong=new CLASS_LIANDONG_YAO(array) //設置數據源
? liandong.firstSelectChange("根目錄","s1"); //設置第一個選擇框
? liandong.subSelectChange("s1","s2"); //設置子級選擇框
?</script>
posted on 2006-11-29 11:41
yxw 閱讀(423)
評論(0) 編輯 收藏 所屬分類:
javascript