不刷新页面改变下拉菜单内容 (1)

在设计数据库查询页面时，下拉菜单是经常使用的元素。很多时候你会希望选择了下拉菜单的一项后，相应的另一下拉菜单的内容会随之改变。这种功能可以通过刷新页面来实现，但界面显得不那么友好。在本文介绍例子中，不需要刷新页面便可达到目的。当在下拉菜单中选择了一个省份后，另一下拉菜单会出现该省份的一些城市供选择。我的基本思路是在客户端脚本中，把下拉菜单可能会出现的所有内容预先存放于数组中，以后根据需要从数组中抽取数据写入下拉菜单中。以下是完整的代码
%26lt;HTML%26gt;
%26lt;HEAD%26gt;
%26lt;TITLE%26gt;动态改变下拉菜单内容示例%26lt;/TITLE%26gt;
%26lt;/HEAD%26gt;
%26lt;SCRIPT LANGUAGE=JavaScript%26gt;
%26lt;!--
//定义一个二维数组aArray,用于存放城市名称。
var aCity=new Array();
aCity[0]=new Array();
aCity[1]=new Array();
aCity[2]=new Array();
aCity[3]=new Array();
//赋值，每个省份的城市存放于数组的一行。
aCity[0][0]=%26quot;--请选择--%26quot;
aCity[1][0]=%26quot;--请选择--%26quot;
aCity[1][1]=%26quot;广州市%26quot;;
aCity[1][2]=%26quot;深圳市%26quot;;
aCity[1][3]=%26quot;珠海市%26quot;;
aCity[1][4]=%26quot;汕头市%26quot;;
aCity[1][5]=%26quot;佛山市%26quot;;
aCity[2][0]=%26quot;--请选择--%26quot;
aCity[2][1]=%26quot;长沙市%26quot;;
aCity[2][2]=%26quot;株州市%26quot;;
aCity[2][3]=%26quot;湘潭市%26quot;;
aCity[3][0]=%26quot;--请选择--%26quot;
aCity[3][1]=%26quot;杭州市%26quot;;
aCity[3][2]=%26quot;苏州市%26quot;;
aCity[3][3]=%26quot;温州市%26quot;;
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%26lt;=iCityCount-1;i++)//改变下拉菜单的内容
document.frm.optCity[i]=new Option(aCity[iProvinceIndex][i]);
document.frm.optCity.focus()
}
--%26gt;
%26lt;/SCRIPT%26gt;
%26lt;BODY ONFOCUS=ChangeCity()%26gt;
%26lt;H3%26gt;选择你所在的省份及城市%26lt;/H3%26gt;
%26lt;FORM NAME=%26quot;frm%26quot;%26gt;
%26lt;P%26gt;省份
%26lt;SELECT NAME=%26quot;optProvince%26quot; SIZE=%26quot;1%26quot; ONCHANGE=ChangeCity()%26gt;
%26lt;OPTION%26gt;--请选择--%26lt;/OPTION%26gt;
%26lt;OPTION%26gt;广东省%26lt;/OPTION%26gt;
%26lt;OPTION%26gt;湖南省%26lt;/OPTION%26gt;
%26lt;OPTION%26gt;浙江省%26lt;/OPTION%26gt;
%26lt;/SELECT%26gt;
%26lt;/P%26gt;
%26lt;P%26gt;城市
%26lt;SELECT NAME=%26quot;optCity%26quot; SIZE=%26quot;1%26quot;%26gt;
%26lt;OPTION%26gt;--请选择--%26lt;/OPTION%26gt;
%26lt;/SELECT%26gt;
%26lt;/P%26gt;
%26lt;/FORM%26gt;
%26lt;/BODY%26gt;
%26lt;/HTML%26gt;