您的位置：首页 > Web前端 > JavaScript

使用JavaScript实现创建动态下拉菜单

2017-09-25 22:38 495 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航