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

前端技术 2023/09/07 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/18273

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案