在设计数据库查询页面时，下拉菜单是经常使用的元素。很多时候你会希望选择了下拉菜单的一项后，相应的另一下拉菜单的内容会随之改变。这种功能可以通过刷新页面来实现，但界面显得不那么友好。在本文介绍例子中，不需要刷新页面便可达到目的。当在下拉菜单中选择了一个省份后，另一下拉菜单会出现该省份的一些城市供选择。我的基本思路是：在客户端脚本中，把下拉菜单可能会出现的所有内容预先存放于数组中，以后根据需要从数组中抽取数据写入下拉菜单中。以下是完整的代码：
<HTML>
<HEAD>
<TITLE>动态改变下拉菜单内容示例</TITLE>
</HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
//定义一个二维数组aArray,用于存放城市名称。
var aCity=new Array();
aCity[0]=new Array();
aCity[1]=new Array();
aCity[2]=new Array();
aCity[3]=new Array();
//赋值，每个省份的城市存放于数组的一行。
aCity[0][0]="--请选择--"
aCity[1][0]="--请选择--"
aCity[1][1]="广州市";
aCity[1][2]="深圳市";
aCity[1][3]="珠海市";
aCity[1][4]="汕头市";
aCity[1][5]="佛山市";
aCity[2][0]="--请选择--"
aCity[2][1]="长沙市";
aCity[2][2]="株州市";
aCity[2][3]="湘潭市";
aCity[3][0]="--请选择--"
aCity[3][1]="杭州市";
aCity[3][2]="苏州市";
aCity[3][3]="温州市";
function ChangeCity()
{var i,iProvinceIndex;
iProvinceIndex=document.frm.optProvince.selectedIndex
iCityCount=0;
while (aCity[iProvinceIndex][iCityCount]!=null) iCityCount++;//计算选定省份的城市个数
document.frm.optCity.length=iCityCount;//改变下拉菜单的选项数
for (i=0;i<=iCityCount-1;i++)//改变下拉菜单的内容
document.frm.optCity[i]=new Option(aCity[iProvinceIndex][i]);
document.frm.optCity.focus()
}
-->
</SCRIPT>
<BODY ONFOCUS=ChangeCity()>
<H3>选择你所在的省份及城市</H3>
<FORM NAME="frm">
<P>省份：
<SELECT NAME="optProvince" SIZE="1" ONCHANGE=ChangeCity()>
<OPTION>--请选择--</OPTION>
<OPTION>广东省</OPTION>
<OPTION>湖南省</OPTION>
<OPTION>浙江省</OPTION>
</SELECT>
</P>
<P>城市：
<SELECT NAME="optCity" SIZE="1">
<OPTION>--请选择--</OPTION>
</SELECT>
</P>
</FORM>
</BODY>
</HTML>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
高级应用，具体应用如下，从数据库读取数据，动态建立下拉菜单内容，二级级联(本站原创^_^)
........................
<script language="javascript">
function ChangeChapter(){
var iChapter,PID;
PID=document.getElementById("classSelect").selectedIndex;
iChapter=0;
while (aCity[PID][iChapter]!=null) iChapter++;
document.form1.oldChapter.length=iChapter;
for (var i=0;i<=iChapter-1;i++){
document.form1.oldChapter[i]=new Option(aCity[PID][i]);
document.form1.oldChapter[i].value=aCityvalue[PID][i];
//可写成一行:document.form1.oldChapter[i]=new Option(aCity[PID][i],aCityvalue[PID][i]);
}
}
</script>
.............................................
<%set ProvinceRs=CreateObject("ADODB.Recordset")
sql="select ID,ProvinceName from Province"
ProvinceRs.open sql,conn,3,1
Response.Write("<script>")
Response.Write("var aCity=new Array();")
Response.Write("var aCityvalue=new Array();")
Response.Write("aCity[0]=new Array();")
Response.Write("aCityvalue[0]=new Array();")
Response.Write("aCity[0][0]='--请选择--';")
Response.Write("aCityvalue[0][0]=0;")
Response.Write("</script>")
%>
<select name="classSelect" id="classSelect" onChange="javascript:ChangeChapter();">
<%if ProvinceRs.recordcount=0 then%>
<option value="0">您没有任何记录可选</option>
<%else%>
<OPTION value="0">--请选择--</OPTION>
<%for i=1 to ProvinceRs.recordcount
if not ProvinceRs.eof then%>
<option value="<%=ProvinceRs("ID")%>">
<%=Rs("ProvinceName")%> </option>
<%Response.Write("<script>")
Response.Write("aCity["&i&"]=new Array();")
Response.Write("aCityvalue["&i&"]=new Array();")
Response.Write("aCity["&i&"][0]='--请选择--';")
Response.Write("</script>")
sql="select ID,CityName from City where PID="&trim(ProvinceRs("ID"))
CityRs.open sql,conn,1
if CityRs.recordcount<>0 then
for k=1 to CityRs.recordcount
if not CityRs.eof then
Response.Write("<script>")
Response.Write("aCityvalue["&i&"]["&k&"]="&trim(CityRs("ID"))&";")
Response.Write("aCity["&i&"]["&k&"]='"&trim(CityRs("CityName"))&"';")
Response.Write("</script>")
CityRs.movenext
end if
next
end if
ProvinceRs.movenext
CityRs.close
end if
next%>
</select>
<select name="oldChapter" id="oldChapter" style="width:200px">
<option value="0">-------请选择-------</option>
</select>
<HTML>
<HEAD>
<TITLE>动态改变下拉菜单内容示例</TITLE>
</HEAD>
<SCRIPT LANGUAGE=javascript>
<!--
//定义一个二维数组aArray,用于存放城市名称。
var aCity=new Array();
aCity[0]=new Array();
aCity[1]=new Array();
aCity[2]=new Array();
aCity[3]=new Array();
//赋值，每个省份的城市存放于数组的一行。
aCity[0][0]="--请选择--"
aCity[1][0]="--请选择--"
aCity[1][1]="广州市";
aCity[1][2]="深圳市";
aCity[1][3]="珠海市";
aCity[1][4]="汕头市";
aCity[1][5]="佛山市";
aCity[2][0]="--请选择--"
aCity[2][1]="长沙市";
aCity[2][2]="株州市";
aCity[2][3]="湘潭市";
aCity[3][0]="--请选择--"
aCity[3][1]="杭州市";
aCity[3][2]="苏州市";
aCity[3][3]="温州市";
function ChangeCity()
{var i,iProvinceIndex;
iProvinceIndex=document.frm.optProvince.selectedIndex
iCityCount=0;
while (aCity[iProvinceIndex][iCityCount]!=null) iCityCount++;//计算选定省份的城市个数
document.frm.optCity.length=iCityCount;//改变下拉菜单的选项数
for (i=0;i<=iCityCount-1;i++)//改变下拉菜单的内容
document.frm.optCity[i]=new Option(aCity[iProvinceIndex][i]);
document.frm.optCity.focus()
}
-->
</SCRIPT>
<BODY ONFOCUS=ChangeCity()>
<H3>选择你所在的省份及城市</H3>
<FORM NAME="frm">
<P>省份：
<SELECT NAME="optProvince" SIZE="1" ONCHANGE=ChangeCity()>
<OPTION>--请选择--</OPTION>
<OPTION>广东省</OPTION>
<OPTION>湖南省</OPTION>
<OPTION>浙江省</OPTION>
</SELECT>
</P>
<P>城市：
<SELECT NAME="optCity" SIZE="1">
<OPTION>--请选择--</OPTION>
</SELECT>
</P>
</FORM>
</BODY>
</HTML>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
高级应用，具体应用如下，从数据库读取数据，动态建立下拉菜单内容，二级级联(本站原创^_^)
........................
<script language="javascript">
function ChangeChapter(){
var iChapter,PID;
PID=document.getElementById("classSelect").selectedIndex;
iChapter=0;
while (aCity[PID][iChapter]!=null) iChapter++;
document.form1.oldChapter.length=iChapter;
for (var i=0;i<=iChapter-1;i++){
document.form1.oldChapter[i]=new Option(aCity[PID][i]);
document.form1.oldChapter[i].value=aCityvalue[PID][i];
//可写成一行:document.form1.oldChapter[i]=new Option(aCity[PID][i],aCityvalue[PID][i]);
}
}
</script>
.............................................
<%set ProvinceRs=CreateObject("ADODB.Recordset")
sql="select ID,ProvinceName from Province"
ProvinceRs.open sql,conn,3,1
Response.Write("<script>")
Response.Write("var aCity=new Array();")
Response.Write("var aCityvalue=new Array();")
Response.Write("aCity[0]=new Array();")
Response.Write("aCityvalue[0]=new Array();")
Response.Write("aCity[0][0]='--请选择--';")
Response.Write("aCityvalue[0][0]=0;")
Response.Write("</script>")
%>
<select name="classSelect" id="classSelect" onChange="javascript:ChangeChapter();">
<%if ProvinceRs.recordcount=0 then%>
<option value="0">您没有任何记录可选</option>
<%else%>
<OPTION value="0">--请选择--</OPTION>
<%for i=1 to ProvinceRs.recordcount
if not ProvinceRs.eof then%>
<option value="<%=ProvinceRs("ID")%>">
<%=Rs("ProvinceName")%> </option>
<%Response.Write("<script>")
Response.Write("aCity["&i&"]=new Array();")
Response.Write("aCityvalue["&i&"]=new Array();")
Response.Write("aCity["&i&"][0]='--请选择--';")
Response.Write("</script>")
sql="select ID,CityName from City where PID="&trim(ProvinceRs("ID"))
CityRs.open sql,conn,1
if CityRs.recordcount<>0 then
for k=1 to CityRs.recordcount
if not CityRs.eof then
Response.Write("<script>")
Response.Write("aCityvalue["&i&"]["&k&"]="&trim(CityRs("ID"))&";")
Response.Write("aCity["&i&"]["&k&"]='"&trim(CityRs("CityName"))&"';")
Response.Write("</script>")
CityRs.movenext
end if
next
end if
ProvinceRs.movenext
CityRs.close
end if
next%>
</select>
<select name="oldChapter" id="oldChapter" style="width:200px">
<option value="0">-------请选择-------</option>
</select>
回复Comments
作者:
{commentrecontent}