在做多个联动的select下拉列表框时，一般都是用javascript数组来动态显示列表框的列表项内容。看到不少程序，都是在脚本中一行一行地输入数组元素，即容易出错，而且让脚本篇幅看上去很大。经常在想为什么不能将这些列表数据存入数据库，由服务器从数据库中读出，然后赋给javascript变量呢？以下这段代码演示了如何将ASP数组变量值赋给javascript数组变量,并利用得到的javascript二维数组生成多级联动下拉列表框。
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html> <head> <meta http-equiv=Content-Type content='text/html; charset=gb2312'><title>ASP从数据表生成联动下拉菜单框</title></head> <body><%set conn=Server.CreateObject("adodb.connection")conn.open "DRIVER=Driver do Microsoft Access (*.mdb);UID=;PWD=;DBQ="&Server.MapPath("data/adsfadgjklufgdgfshmnbcc.mdb")set rst=server.CreateObject("adodb.recordset") sql="select * from district"'district是本人建的一个深圳市行政区域表，分三个字段：辖区名，街道名和社区名，且已经建立了组合索引'本脚本就是根据带有三个字段的数据表来生成三级联动下拉菜单rst.open sql,conn,1,1dim a(),dim1,dim2,idim1=rst.recordcount-1'得到二维数组的行维下标dim2=rst.fields.count-1'得到二维数的列维下标i=0redim a(dim1,dim2)'根据上面得到的行、列下标重定义数组while not rst.eof'开始循环给数组赋值for j=0 to dim2if isnumeric(rst.fields(j).value) thena(i,j)=rst.fields(j).valueelsea(i,j)="'"&rst.fields(j).value&"'" '对于非数字类型的数据，我们直接在其左右加上单引号end ifnexti=i+1rst.movenextwendrst.closeset rst=nothingsub showarray(arr,row)'二维数组的单行转换，row表示第几行col=Ubound(arr,2) if col>=0 thenresponse.write(arr(row,0))if col>=1 thenfor n=1 to col response.write(","&arr(row,n))next end ifelse response.write("")end ifend subsub showarr_towdim(arr2)'将ASP二维数组转换成供JAVASCRIPT程序中定义数组使用的代码 num=Ubound(arr2)if num>=0 thenresponse.write("new Array(")call showarray(arr2,0)'调用单行转换response.write(")"&chr(13))if num>=1 thenfor m=1 to numresponse.write(",new Array(")call showarray(arr2,m)'循环调用单行转换response.write(")"&chr(13))nextend ifelseresponse.write("")end ifend sub%><form name="form1" id="form1" action="" method="post"><%for j=1 to dim2+1 '根据列数来循环生成下拉框，当然在已经知道数据库信息后，你可不使用循环，设计更友好的下拉框%><select name="select<%=j%>" id="select<%=j%>"><option value="" selected>-请选择第<%=j%>个选项-</option></select><%next%></form><script language="javascript">var b=new Array(<%call showarr_towdim(a)%>);//将asp二维数组a赋值给b var cols=b.length;var sel1=document.getElementById("select1");var sel2=document.getElementById("select2");/************以下初始化第一个下拉框****************/var opt_index=0;for(var i=0;i<cols;i++){if(b[i][0]!=sel1.options[opt_index].value){opt_index+=1;sel1.options[opt_index]=new Option(b[i][0],b[i][0]);}}/************以下定义第一个下拉框的onChange事件处理函数****************/sel1.οnchange=function(){var value=this.options[this.selectedIndex].value;sel2.length=1;//先清空除第一项外的所有选项。var index=0;for(var i=0;i<cols;i++){if(b[i][0]==value && b[i][1]!=sel2.options[index].value){index+=1;sel2.options[index]=new Option(b[i][1],b[i][1]);}}}/************以下定义第二个下拉框的onChange事件处理函数****************/sel2.οnchange=function(){var value=this.options[this.selectedIndex].value;var sel3=document.getElementById("select3");sel3.length=1;//先清空除第一项外的所有选项。var index=0;for(var i=0;i<cols;i++){if(b[i][0]==sel1.value && b[i][1]==value && b[i][2]!=sel3.options[index].value){index+=1;sel3.options[index]=new Option(b[i][2],b[i][2]);}}}</script></body> </html>
