javascript省市级联功能实现方法实例详解
本文实例讲述了javascript省市级联功能实现方法。分享给大家供大家参考，具体如下：
初步实现方法：
<html>
<head>
<scriptlanguage="javascript">
functionchangecity(){
varprovince=document.form1.selprovince.value;
varnewoption1,newoption2;
switch(province){
case"四川省":
newoption1=newOption("成都市","chengdu");
newoption2=newOption("绵阳市","mianyang");
break;
case"湖北省":
newoption1=newOption("武汉市","wuhan");
newoption2=newOption("襄樊市","xiangfan");
break;
case"山东省":
newoption1=newOption("青岛市","qingdao");
newoption2=newOption("烟台市","yantai");
break;
}
document.form1.selcity.options.length=0;
document.form1.selcity.options.add(newoption1);
document.form1.selcity.options.add(newoption2);
}
</script>
</head>
<formname="form1"action=""method="post">
<selectname="selprovince"onchange="changecity()">
<option>--请选择开户帐号的省份--</option>
<OPTIONvalue="四川省">四川省</OPTION>
<OPTIONvalue="山东省">山东省</OPTION>
<OPTIONvalue="湖北省">湖北省</OPTION>
</select>
<selectname="selcity">
<option>--请选择开户帐号的城市--</option>
</select>
</form>
</html>
改进实现方法：
<html>
<head>
<scriptlanguage="javascript">
functionchangecity(){
varcityList=newArray();
cityList[0]=['成都','绵阳','德阳','自贡'];
cityList[1]=['济南','青岛','淄博','枣庄'];
cityList[2]=['武汉','宜昌','荆州','襄樊'];
varpindex=document.form1.selprovince.selectedIndex-1;
varnewoption1;
document.form1.selcity.options.length=0;
for(varjincityList[pindex]){
newoption1=newOption(cityList[pindex][j],cityList[pindex][j]);
document.form1.selcity.options.add(newoption1);
}
}
</script>
</head>
<formname="form1"action=""method="post">
<selectname="selprovince"onchange="changecity()">
<option>--请选择省份--</option>
<OPTIONvalue="四川省">四川省</OPTION>
<OPTIONvalue="山东省">山东省</OPTION>
<OPTIONvalue="湖北省">湖北省</OPTION>
</select>
<selectname="selcity">
<option>--请选择城市--</option>
</select>
</form>
</html>
改进方法2：
<html>
<head>
<scriptlanguage="javascript">
functioncitychange(){
varcityList=newArray();
cityList['辽宁省']=['沈阳','鞍山','大连'];
cityList['山东省']=['济南','烟台','蓬莱'];
cityList['山西省']=['太原','大同','平遥'];
varpindex=document.form1.selprovince.value;
varnewoption1;
document.form1.selcity.options.length=0;
for(variincityList[pindex]){
newoption1=newOption(cityList[pindex][i],cityList[pindex][i]);
document.form1.selcity.options.add(newoption1);
}
}
</script>
</head>
<formaction=""name="form1"method="post">
<selectname="selprovince"onchange="citychange()">
<option>请选择省份</option>
<OPTIONvalue="辽宁省">辽宁省</OPTION>
<OPTIONvalue="山东省">山东省</OPTION>
<OPTIONvalue="山西省">山西省</OPTION>
</select>
<selectname="selcity">
<option>请选择城市</option>
</select>
</form>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。