三种省市级联下拉列表的写法

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

 

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

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


第一种方式,也是最原始的方式
Html代码
  1. <SPAN style="FONT-SIZE: large"><HTML>  
  2. <HEAD>  
  3. <META http-equiv="Content-Type" content="text/html; charset=gb2312">  
  4. <TITLE>注册TITLE>  
  5. <SCRIPT language="JavaScript" >  
  6.   function changeCity( ){   
  7.       //获取用户选择的省份   
  8.      var province=document.myform.selProvince.value;    
  9.      var newOption1,newOption2;   
  10.      switch(province){   
  11.          //根据用户选择的省份动态创建城市下拉列表   
  12.        case  "四川省" :   
  13.             newnewOption1= new Option("成都市","chengdu");   
  14.             newnewOption2= new Option("泸州市","luzhou");   
  15.             break;   
  16.        case "湖北省" :    
  17.             newnewOption1= new Option("武汉市","wuhan");   
  18.             newnewOption2= new Option("襄樊市","xiangfan");   
  19.             break;   
  20.        case "山东省" :    
  21.            newnewOption1= new Option("青岛市","qingdao");   
  22.            newnewOption2= new Option("烟台市","yantai");   
  23.             break;              
  24.       }   
  25.       //清除原有选项   
  26.      document.myform.selCity.options.length=0;   
  27.      //将选项添加到选项数组   
  28.      document.myform.selCity.options.add(newOption1);   
  29.      document.myform.selCity.options.add(newOption2);   
  30.   }   
  31. SCRIPT>  
  32.  HEAD>  
  33.   
  34. <BODY>  
  35. <FORM name="myform"  action="register_success.htm"  >  
  36. <TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0">  
  37.   <TR>  
  38.     <TD align="center">省份 TD>  
  39.       
  40.     <TD><SELECT name="selProvince" onChange="changeCity( )">  
  41.       <OPTION>--请选择开户帐号的省份--OPTION>  
  42.       <OPTION value="四川省">四川省OPTION>  
  43.       <OPTION value="山东省">山东省OPTION>  
  44.       <OPTION value="湖北省">湖北省OPTION>  
  45.        SELECT>TD>  
  46.   TR>  
  47.   <TR>  
  48.     <TD align="center" valign="bottom"> 城市 TD>  
  49.     <TD><P>  
  50.       <SELECT name="selCity">  
  51.         <OPTION>--请选择开户帐号的城市--OPTION>  
  52.       SELECT>  
  53.         P>  
  54.       TD>  
  55.   TR>  
  56.     
  57.   TR>  
  58. TABLE>  
  59. FORM>  
  60. BODY>  
  61. HTML>SPAN>  



注册

 


省份
城市

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

第二方式,通过数组的方式
Js代码
  1. "FONT-SIZE: large">"-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">   
  3.   
  4.   
  5. "Content-Type" content="text/html; charset=gb2312">   
  6. 注册   
  7. "JavaScript" >   
  8.    function changeCity( )   
  9.   {   
  10.         
  11.      //创建数组,可以不指定大小    
  12.      var cityList = new Array( );   
  13.      //为数组赋值。每个单元格可以是数组。JavaScript不支持二维数组    
  14.      cityList[0]=['成都''绵阳''德阳''自贡''内江''乐山''南充''雅安''眉山''甘孜''凉山''泸州'];   
  15.      cityList[1]=['济南''青岛''淄博''枣庄''东营''烟台''潍坊''济宁''泰安''威海''日照'];   
  16.      cityList[2] = ['武汉''宜昌''荆州''襄樊''黄石''荆门''黄冈''十堰''恩施''潜江'];   
  17.      //获得省份选项的索引号,如四川省为1,比对应数组索引号多1[这么说的原因是升级下拉列表第一项是'请选择省份'也占一个索引位置]   
  18.      var pIndex=document.myform.selProvince.selectedIndex-1;    
  19.      var newOption1;   
  20.      document.myform.selCity.options.length=0;   
  21.      for (var j in cityList[pIndex])    
  22.      {   
  23.          newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]);    
  24.          document.myform.selCity.options.add(newOption1);   
  25.      }   
  26.   }   
  27.      
  28.   
  29.   
  30.     
  31.   
  32.   
  33. "myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )">   
  34. "472" border="0" align="center" cellpadding="0" cellspacing="0">   
  35.   
  36.      
  37.     "center">省份    
  38.     "selProvince" id="selProvince" onChange="changeCity( )">   
  39.          
  40.       "四川省">四川省   
  41.       "山东省">山东省   
  42.       "湖北省">湖北省   
  43.        
  44.      
  45.      
  46.     "center">城市
  
  •     "selCity" id="selCity" onChange="myfun1( )">   
  •          
  •           
  •      
  •   
  •   
  •   
  •   
  •   
  •  第三种方式,可以通过数组标识方式,也就是使用文字下标的数组再次优化
    Html代码
    1. <SPAN style="FONT-SIZE: large">
    2. "http://www.w3.org/TR/html4/loose.dtd">  
    3. <HTML>  
    4. <HEAD>  
    5. <META http-equiv="Content-Type" content="text/html; charset=gb2312">  
    6. <TITLE>注册TITLE>  
    7. <SCRIPT language="JavaScript" >  
    8.   function changeCity( )   
    9.   {   
    10.         
    11.      //JavaScript中的数组下标可以采用标识符代替。   
    12.      //可以根据用户选择的value值,与数组下标标识 进行比较,从而找出该省包括的城市。   
    13.   
    14.      var province=document.myform.selProvince.value;    
    15.      var cityList = new Array( );   
    16.      //数组下标采用文字标识符代替   
    17.      cityList['山东省'] = ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照'];   
    18.      cityList['四川省'] =['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州'];   
    19.      cityList['湖北省'] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江'];   
    20.         
    21.      document.myform.selCity.options.length=0;   
    22.     //根据省份下拉框的值,获取对应数组的索引标识   
    23.      var pIndex=document.myform.selProvince.value;    
    24.      var newOption1;   
    25.      document.myform.selCity.options.length=0;   
    26.      //数组的读取和数字索引方式相同   
    27.      for (var j in cityList[pIndex])    
    28.      {   
    29.          newnewOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]);    
    30.          document.myform.selCity.options.add(newOption1);   
    31.      }   
    32.   }   
    33.      
    34.      
    35. SCRIPT>  
    36.   
    37.  HEAD>  
    38.   
    39. <BODY>  
    40. <FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )">  
    41. <TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0">  
    42.   
    43.   <TR>  
    44.     <TD align="center">省份 TD>  
    45.     <TD><SELECT name="selProvince" id="selProvince" onChange="changeCity( )">  
    46.        <OPTION>--请选择开户帐号的省份--OPTION>  
    47.       <OPTION value="四川省">四川省OPTION>  
    48.       <OPTION value="山东省">山东省OPTION>  
    49.       <OPTION value="湖北省">湖北省OPTION>  
    50.                         SELECT>TD>  
    51.   TR>  
    52.   <TR>  
    53.     <TD><DIV align="center">城市DIV>TD>  
    54.     <TD><SELECT name="selCity" id="selCity" onChange="myfun1( )">  
    55.       <OPTION>--请选择开户帐号的城市--OPTION>  
    56.           
    57.             SELECT>TD>  
    58.   TR>  
    59.   
    60. TABLE>  
    61. FORM>  
    62. BODY>  
    63. HTML>  
    64. SPAN>  

    你可能感兴趣的:(javascript,border,action,html,function,table)