省市区级联实现方法-优快云博客

一般我们如果实现省市级联效果，思路大致都如下：

1、利用省份下拉框的选项改变事件onChange

2、根据用户选择的省份，动态添加城市下拉框的值

第一种方式，也是最原始的方式

     Html代码   
     
   
 <span style="font-size: large;"><HTML>  
 <HEAD>  
 <META http-equiv="Content-Type" content="text/html; charset=gb2312">  
 <TITLE>注册</TITLE>  
 <SCRIPT language="JavaScript" >  
   function changeCity( ){  
       //获取用户选择的省份  
      var province=document.myform.selProvince.value;   
      var newOption1,newOption2;  
      switch(province){  
          //根据用户选择的省份动态创建城市下拉列表  
        case  "四川省" :  
             newnewOption1= new Option("成都市","chengdu");  
             newnewOption2= new Option("泸州市","luzhou");  
             break;  
        case "湖北省" :   
             newnewOption1= new Option("武汉市","wuhan");  
             newnewOption2= new Option("襄樊市","xiangfan");  
             break;  
        case "山东省" :   
            newnewOption1= new Option("青岛市","qingdao");  
            newnewOption2= new Option("烟台市","yantai");  
             break;             
       }  
       //清除原有选项  
      document.myform.selCity.options.length=0;  
      //将选项添加到选项数组  
      document.myform.selCity.options.add(newOption1);  
      document.myform.selCity.options.add(newOption2);  
   }  
 </SCRIPT>  
  </HEAD>  
   
 <BODY>  
 <FORM name="myform"  action="register_success.htm"  >  
 <TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0">  
   <TR>  
     <TD align="center">省份 </TD>  
     <!--当用户选择不同省份时，将调用函数，改变城市下拉列表值-->  
     <TD><SELECT name="selProvince" onChange="changeCity( )">  
       <OPTION>--请选择开户帐号的省份--</OPTION>  
       <OPTION value="四川省">四川省</OPTION>  
       <OPTION value="山东省">山东省</OPTION>  
       <OPTION value="湖北省">湖北省</OPTION>  
        </SELECT></TD>  
   </TR>  
   <TR>  
     <TD align="center" valign="bottom"> 城市 </TD>  
     <TD><P>  
       <SELECT name="selCity">  
         <OPTION>--请选择开户帐号的城市--</OPTION>  
       </SELECT>  
         </P>  
       </TD>  
   </TR>  
    
   </TR>  
 </TABLE>  
 </FORM>  
 </BODY>  
 </HTML></span>  

如果有很多城市，就需要定义很多变量，编写很多重复的代码.使用数组优化省市级联功能

第二方式，通过数组的方式

     Js代码   
     
   
 <span style="font-size: large;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
 "http://www.w3.org/TR/html4/loose.dtd">  
 <HTML>  
 <HEAD>  
 <META http-equiv="Content-Type" content="text/html; charset=gb2312">  
 <TITLE>注册</TITLE>  
 <SCRIPT language="JavaScript" >  
    function changeCity( )  
   {  
        
      //创建数组，可以不指定大小   
      var cityList = new Array( );  
      //为数组赋值。每个单元格可以是数组。JavaScript不支持二维数组   
      cityList[0]=['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州'];  
      cityList[1]=['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照'];  
      cityList[2] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江'];  
      //获得省份选项的索引号，如四川省为1，比对应数组索引号多1[这么说的原因是升级下拉列表第一项是'请选择省份'也占一个索引位置]  
      var pIndex=document.myform.selProvince.selectedIndex-1;   
      var newOption1;  
      document.myform.selCity.options.length=0;  
      for (var j in cityList[pIndex])   
      {  
          newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]);   
          document.myform.selCity.options.add(newOption1);  
      }  
   }  
     
 </SCRIPT>  
   
  </HEAD>  
   
 <BODY>  
 <FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )">  
 <TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0">  
   
   <TR>  
     <TD align="center">省份 </TD>  
     <TD><SELECT name="selProvince" id="selProvince" onChange="changeCity( )">  
       <OPTION>--请选择开户帐号的省份--</OPTION>  
       <OPTION value="四川省">四川省</OPTION>  
       <OPTION value="山东省">山东省</OPTION>  
       <OPTION value="湖北省">湖北省</OPTION>  
     </SELECT></TD>  
   </TR>  
   <TR>  
     <TD><DIV align="center">城市</DIV></TD>  
     <TD><SELECT name="selCity" id="selCity" onChange="myfun1( )">  
       <OPTION>--请选择开户帐号的城市--</OPTION>  
        </SELECT></TD>  
   </TR>  
   
 </TABLE>  
 </FORM>  
 </BODY>  
 </HTML></span>  

第三种方式，可以通过数组标识方式，也就是使用文字下标的数组再次优化

     Html代码   
     
   
 <span style="font-size: large;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
 "http://www.w3.org/TR/html4/loose.dtd">  
 <HTML>  
 <HEAD>  
 <META http-equiv="Content-Type" content="text/html; charset=gb2312">  
 <TITLE>注册</TITLE>  
 <SCRIPT language="JavaScript" >  
   function changeCity( )  
   {  
        
      //JavaScript中的数组下标可以采用标识符代替。  
      //可以根据用户选择的value值，与数组下标标识 进行比较，从而找出该省包括的城市。  
   
      var province=document.myform.selProvince.value;   
      var cityList = new Array( );  
      //数组下标采用文字标识符代替  
      cityList['山东省'] = ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照'];  
      cityList['四川省'] =['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州'];  
      cityList['湖北省'] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江'];  
        
      document.myform.selCity.options.length=0;  
     //根据省份下拉框的值，获取对应数组的索引标识  
      var pIndex=document.myform.selProvince.value;   
      var newOption1;  
      document.myform.selCity.options.length=0;  
      //数组的读取和数字索引方式相同  
      for (var j in cityList[pIndex])   
      {  
          newnewOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]);   
          document.myform.selCity.options.add(newOption1);  
      }  
   }  
     
     
 </SCRIPT>  
   
  </HEAD>  
   
 <BODY>  
 <FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )">  
 <TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0">  
   
   <TR>  
     <TD align="center">省份 </TD>  
     <TD><SELECT name="selProvince" id="selProvince" onChange="changeCity( )">  
        <OPTION>--请选择开户帐号的省份--</OPTION>  
       <OPTION value="四川省">四川省</OPTION>  
       <OPTION value="山东省">山东省</OPTION>  
       <OPTION value="湖北省">湖北省</OPTION>  
                         </SELECT></TD>  
   </TR>  
   <TR>  
     <TD><DIV align="center">城市</DIV></TD>  
     <TD><SELECT name="selCity" id="selCity" onChange="myfun1( )">  
       <OPTION>--请选择开户帐号的城市--</OPTION>  
          
             </SELECT></TD>  
   </TR>  
   
 </TABLE>  
 </FORM>  
 </BODY>  
 </HTML>  
 </span>  