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程序设计有所帮助。