选择菜单

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