您的位置：首页 > 其它

一个select的数据控制另一个select数据的事例

2010-03-18 17:41 721 查看

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test javascript</title>

<script type="text/javascript">
var provinceArray = new Array("山东省","山西省","四川省");
var city4shandong = new Array("济南","聊城","菏泽","滨州","长清","","临沂","济宁","枣庄","商河","日照","曲阜","东营","滕州","烟台","威海","沂蒙","临朐","临清","潍坊");
var city4shanxi = new Array("太原","大同","高平","长治","侯马","孝义","晋城");
var city4sichuan = new Array("成都","攀枝花","自贡","泸州","德阳","绵阳","广元","遂宁","乐山","南充","眉山","宜宾","广安","达州","雅安","巴中","资阳","阿坝","甘孜","凉山");

function initProvince(){
for(var i=0; i<provinceArray.length; i++){
var optionObj = document.createElement("OPTION");
optionObj.value = provinceArray[i];
optionObj.text = provinceArray[i];
document.getElementById("ddlProvince").options.add(optionObj);
}
}

function initCity(provinceName){
if(provinceName=="山东省"){
clearAllCitys();
for(var i=0; i<city4shandong.length; i++){
var optionObj = document.createElement("OPTION");
optionObj.value = city4shandong[i];
optionObj.text = city4shandong[i];
document.getElementById("ddlCtiy").options.add(optionObj);
}
}
else if(provinceName=="山西省"){
clearAllCitys();
for(var i=0; i<city4shanxi.length; i++){
var optionObj = document.createElement("OPTION");
optionObj.value = city4shanxi[i];
optionObj.text = city4shanxi[i];
document.getElementById("ddlCtiy").options.add(optionObj);
}
}
else if(provinceName=="四川省"){
clearAllCitys();
for(var i=0; i<city4sichuan.length; i++){
var optionObj = document.createElement("OPTION");
optionObj.value = city4sichuan[i];
optionObj.text = city4sichuan[i];
document.getElementById("ddlCtiy").options.add(optionObj);
}
}
}
function clearAllCitys(){
var optionArray=document.getElementById("ddlCtiy").options;
for(var i=1;i<optionArray.length;){
optionArray.remove(i);
}
}
</script>
</head>
<body onload="initProvince()">
<table>
<tr>
<td>province:</td>
<td>
<select id="ddlProvince" onChange="initCity(this.value)">
<option vlue="choose">choose</option>
</select>
</td>
</tr>
<tr>
<td>city:</td>
<td>
<select id="ddlCtiy">
<option vlue="choose">choose</option>
</select>
</td>
</tr>
</table>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航