<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<title>利用二维数组创建动态下拉菜单</title>
<script type="text/javascript">
//定义一个二维数组acity,用于存储城市名称
var acity=new array();
acity[0]=new array();
acity[1]=new array();
acity[2]=new array();
acity[3]=new array();
acity[4]=new array();
acity[5]=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[2][4]=宝安区;
acity[2][5]=龙岗区;
acity[2][6]=盐田区;
acity[3][0]=--请选择--;
acity[3][1]=越秀区;
acity[3][2]=东山区;
acity[3][3]=海珠区;
acity[3][4]=荔湾区;
acity[3][5]=天河区;
acity[3][6]=白云区;
acity[4][0]=--请选择--;
acity[4][1]=西湖区;
acity[4][2]=上城区;
acity[4][3]=下城区;
acity[4][4]=江干区;
acity[4][5]=拱墅区;
acity[4][6]=滨江区;
acity[5][0]=--请选择--;
acity[5][1]=新城区;
acity[5][2]=碑林区;
acity[5][3]=莲湖区;
acity[5][4]=雁塔区;
acity[5][5]=灞桥区;
acity[5][6]=长安区;
acity[5][7]=周至县;
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></head><body onfocus="changecity()">
<h3>选择省份及城市</h3>
<form name="frm">
<p>省份: <select name="optprovince" size="1" onchange="changecity()">
<option>--请选择--</option>
<option>北京市</option>
<option>深圳市</option>
<option>广州市</option>
<option>杭州市</option>
<option>西安市</option>
</select>
</p>
<p>城市:
<select name="optcity" size="1">
<option>--请选择--</option>
</select>
</p>
</form></body></html>
以上就是如何使用javascript实现创建动态下拉菜单效果的详细内容。
