<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选择菜单</title>
<script type="text/javascript">
function selectedCity(proObj){
var proValue = proObj.value;
var cityObj = document.getElementById("cityId");
cityObj.options.length=1;
if(proValue=="请选择省份")
return;
//声明 cityboj 元素
var cityArrays = new Array();
cityArrays["陕西省"] = ["西安","咸阳","榆林"]; // 数组 中文下标
cityArrays["山西省"] = ["太原","大同","运城"];
cityArrays["广东省"] = ["广州","深圳","中山"];
cityArrays["河南省"] = ["洛阳","郑州","开封"];
cityArrays["甘肃省"] = ["兰州","天水","酒泉"];
//添加 cityboj 数组元素
for(var i=0;i<cityArrays[proValue].length;i++){
var newOption = new Option(cityArrays[proValue][i],cityArrays[proValue][i]);
cityObj.add(newOption);
}
}
function selectedSchool(cityObj){
var cityValue = cityObj.value;
var schoolObj = document.getElementById("schoolId");
schoolObj.options.length=1;
if(cityValue=="请选择城市")
return;
var schoolArrays = new Array();
schoolArrays["西安"] = ["交大","西工大","西电"];
schoolArrays["咸阳"] = ["4","5","6"];
schoolArrays["榆林"] = ["7","8","9"];
for(var i=0;i<schoolArrays[cityValue].length;i++){
var newOption = new Option(schoolArrays[cityValue][i],schoolArrays[cityValue][i]);
schoolObj.add(newOption);
}
}
</script>
</head>
<body>
<table width="200" border="0" align="center">
<tr>
<td>
<select name="province" onchange="selectedCity(this)">
<option value="请选择省份">请选择省份</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="广东省">广东省</option>
<option value="河南省">河南省</option>
<option value="甘肃省">甘肃省</option>
</select>
</td>
<td>
<select name="city" id="cityId" onchange="selectedSchool(this)">
<option value="请选择城市">请选择城市</option>
</select>
</td>
<td>
<select name="school" id="schoolId" >
<option value="请选择学校">请选择学校</option>
</select>
</td>
</tr>
</table>
</body>
</html>