首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

实现两级上拉选项的代码

2012-10-09 
实现两级下拉选项的代码!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//ENhtmlheadti

实现两级下拉选项的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script language="JavaScript" type="text/javascript">
<!--
//按照省份下拉列表框的顺序定义二维数组,将城市列表对应到省份
var city=[
["北京","天津","上海","重庆"],//直辖市
["南京","苏州","南通","常州"],//江苏省
["福州","福安","龙岩","南平"],//福建省
["广州","潮阳","潮州","澄海"],//广东省
["兰州","白银","定西","敦煌"]//甘肃省
];

function getCity(){
//获得身省份和城市下拉列表框的引用
var sltProvince=document.forms["theForm"].elements["province"];
var sltCity=document.forms["theForm"].elements["city"];
//得到对应于省份的城市列表数组
var provinceCity=city[sltProvince.selectedIndex-1];

//将城市下拉列表框清空,仅留第一个提示选项
sltCity.length=1;
//将相应省市的城市填充到城市选择框中
for(var i=0;i<provinceCity.length;i++){
//创建新的Option对象并将其添加到城市下拉列表框中
// 第一个provinceCity是显示的值,第二个代码是provinceCity为value值
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
}
}
//-->
</script>
</head>
<body>

<form action="somepage.jsp" name="theForm">
<select name="province" onchange="getCity()">
<option value="0">请选择所在省份</option>
<option value="直辖市">直辖市</option>
<option value="江苏省">江苏省</option>
<option value="福建省">福建省</option>
<option value="广东省">广东省</option>
<option value="甘肃省">甘肃省</option>
</select>
<select name="city">
<option value="0">请选择所在城市</option>
</select>
</form>
</body>
</html>

热点排行