javascript省市级联功能实现方法实例详解

本文实例讲述了javascript省市级联功能实现方法。分享给大家供大家参考，具体如下：
初步实现方法：

<html><head><script language="javascript"> function changecity（）{ var province = document.form1.selprovince.value; var newoption1,newoption2; switch（province）{case "四川省":newoption1 = new Option（"成都市", "chengdu"）;newoption2 = new Option（"绵阳市", "mianyang"）;break; case "湖北省" : newoption1= new Option（"武汉市","wuhan"）;newoption2= new Option（"襄樊市","xiangfan"）;break; case "山东省" :newoption1= new Option（"青岛市","qingdao"）; newoption2= new Option（"烟台市","yantai"）;break; } document.form1.selcity.options.length=0; document.form1.selcity.options.add（newoption1）; document.form1.selcity.options.add（newoption2）; }</script></head><form name="form1" action="" method="post"> <select name="selprovince" onchange="changecity（）"> <option>--请选择开户帐号的省份--</option> <OPTION value="四川省">四川省</OPTION> <OPTION value="山东省">山东省</OPTION> <OPTION value="湖北省">湖北省</OPTION> </select> <select name="selcity"> <option>--请选择开户帐号的城市--</option> </select></form></html>

改进实现方法：

<html><head><script language="javascript"> function changecity（）{ var cityList = new Array（）; cityList[0]=["成都", "绵阳", "德阳", "自贡"]; cityList[1]=["济南", "青岛", "淄博", "枣庄"]; cityList[2]=["武汉", "宜昌", "荆州", "襄樊"]; var pindex = document.form1.selprovince.selectedIndex-1; var newoption1; document.form1.selcity.options.length = 0; for（var j in cityList[pindex]）{newoption1 = new Option（cityList[pindex][j], cityList[pindex][j]）;document.form1.selcity.options.add（newoption1）; } }</script></head><form name="form1" action="" method="post"> <select name="selprovince" onchange="changecity（）"> <option>--请选择省份--</option> <OPTION value="四川省">四川省</OPTION> <OPTION value="山东省">山东省</OPTION> <OPTION value="湖北省">湖北省</OPTION> </select> <select name="selcity"> <option>--请选择城市--</option> </select></form></html>

改进方法2：

<html><head><script language="javascript"> function citychange（）{ var cityList = new Array（）; cityList["辽宁省"] = ["沈阳","鞍山","大连"]; cityList["山东省"] = ["济南","烟台","蓬莱"]; cityList["山西省"] = ["太原","大同","平遥"]; var pindex = document.form1.selprovince.value; var newoption1; document.form1.selcity.options.length = 0; for（var i in cityList[pindex]）{newoption1 = new Option（cityList[pindex][i],cityList[pindex][i]）;document.form1.selcity.options.add（newoption1）; } }</script></head><form action="" name="form1" method="post"> <select name="selprovince" onchange="citychange（）"> <option>请选择省份</option> <OPTION value="辽宁省">辽宁省</OPTION> <OPTION value="山东省">山东省</OPTION> <OPTION value="山西省">山西省</OPTION> </select> <select name="selcity"> <option>请选择城市</option> </select></form></html>

希望本文所述对大家JavaScript程序设计有所帮助。