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