javascript三级联动select

数据库结构：

   省份｛编号，名称｝：sheng｛ID，sheng｝
   城市｛编号，所属省份，名称｝：shi｛ID，shengID，shi｝
   区域｛编号，所属城市，名称｝：qu｛ID，shiID，qu｝

ASP代码：

< ! -- #include file = " conn.asp " -->
< script language = " javascript " >
    var city = new   Array ();
    var area = new   Array ();
    var i = 0 ;
    
     // 存储所有城市名称，可以从数据库读出。 Array ( " 所属ID " , " ID " , " 名称 " );
     < % set  rsc = server.CreateObject( " adodb.recordset " )
    rsc.open  " select * from shi " ,conn, 1 , 1
     for  i = 0   to  rsc.recordcount - 1
    % > city[ < % = i% > ] = new   Array ( " <%=rsc( " shengid " )%> " , " <%=rsc( " id " )%> " , " <%=rsc( " shi " )%> " );
     < %
        rsc.movenext
     next
     set  rsc = nothing
    % >
     // 存储所有区域名称，可以从数据库读出。 Array ( " 所属ID " , " ID " , " 名称 " );
     < % set  rsa = server.CreateObject( " adodb.recordset " )
    rsa.open  " select * from qu " ,conn, 1 , 1
     for  i = 0   to  rsa.recordcount - 1
    % > area[ < % = i% > ] = new   Array ( " <%=rsa( " shiid " )%> " , " <%=rsa( " id " )%> " , " <%=rsa( " qu " )%> " );
     < %
        rsa.movenext
     next
     set  rsa = nothing
    % >
     // 改变省份时候创建城市选项
     function  chgprovince(ID){
        document.f1.s2.length = 0 ;
        document.f1.s2.options[ 0 ] = new   Option ( " --请选择-- " , " 0 " );
        document.f1.s3.length = 0 ;
        document.f1.s3.options[ 0 ] = new   Option ( " --请选择-- " , " 0 " );
         for (i = 0 ;i < city.length;i ++ ){
             if (city[i][ 0 ] == ID){
                document.f1.s2.options[document.f1.s2.length] = new   Option (city[i][ 2 ],city[i][ 1 ]);
            }
        }    
    }
    
     // 改变城市时候创建区域选项
     function  chgcity(ID){
        document.f1.s3.length = 0 ;
        document.f1.s3.options[ 0 ] = new   Option ( " --请选择-- " , " 0 " );
         for (i = 0 ;i < area.length;i ++ ){
             if (area[i][ 0 ] == ID){
                document.f1.s3.options[document.f1.s3.length] = new   Option (area[i][ 2 ],area[i][ 1 ]);
            }
        }    
    }
</ script >
< form id = " f1 "  name = " form1 "  method = " post "  action = "" >
   < select  name = " s1 "  onchange = " chgprovince(this.value); " >
     < ! -- 第一级直接给出，或从数据库读出。  -->
     < option  value = " 0 " >-- 请选择 --</ option >
     < % set  rsp = server.CreateObject( " adodb.recordset " )
    rsp.open  " select * from sheng " ,conn, 1 , 1
     for  i = 0   to  rsp.recordcount - 1
    % >< option  value = " <%=rsp( " id " )%> " >< % = rsp( " sheng " )% ></ option >
     < %
        rsp.movenext
     next
     set  rsp = nothing
    % >
   </ select >
   < select  name = " s2 "  onchange = " chgcity(this.value); " >
     < option  value = " 0 " >-- 请选择 --</ option >     
   </ select >
   < select  name = " s3 " >
     < option  value = " 0 " >-- 请选择 --</ option >     
   </ select >
</ form >

 

运行生成的HTML代码：

< script  language ="javascript" >
     var  city = new  Array();
     var  area = new  Array();
     var  i = 0 ;
    
     // 存储所有城市名称，可以从数据库读出。Array("所属ID","ID","名称");
    city[ 0 ] = new  Array( " 1 " , " 1 " , " 南宁 " );
    city[ 1 ] = new  Array( " 1 " , " 2 " , " 梧州 " );
    city[ 2 ] = new  Array( " 2 " , " 3 " , " 广州 " );
    city[ 3 ] = new  Array( " 3 " , " 4 " , " 长沙 " );
    
     // 存储所有区域名称，可以从数据库读出。Array("所属ID","ID","名称");
    area[ 0 ] = new  Array( " 1 " , " 1 " , " 朗东 " );
    area[ 1 ] = new  Array( " 1 " , " 2 " , " 西乡塘 " );
    area[ 2 ] = new  Array( " 3 " , " 3 " , " 天河 " );
    area[ 3 ] = new  Array( " 3 " , " 4 " , " 海珠 " );
    area[ 4 ] = new  Array( " 3 " , " 5 " , " 从化 " );
    
     // 改变省份时候创建城市选项
     function  chgprovince(ID){
        document.f1.s2.length = 0 ;
        document.f1.s2.options[ 0 ] = new  Option( " --请选择-- " , " 0 " );
        document.f1.s3.length = 0 ;
        document.f1.s3.options[ 0 ] = new  Option( " --请选择-- " , " 0 " );
         for (i = 0 ;i < city.length;i ++ ){
             if (city[i][ 0 ] == ID){
                document.f1.s2.options[document.f1.s2.length] = new  Option(city[i][ 2 ],city[i][ 1 ]);
            }
        }    
    }
    
     // 改变城市时候创建区域选项
     function  chgcity(ID){
        document.f1.s3.length = 0 ;
        document.f1.s3.options[ 0 ] = new  Option( " --请选择-- " , " 0 " );
         for (i = 0 ;i < area.length;i ++ ){
             if (area[i][ 0 ] == ID){
                document.f1.s3.options[document.f1.s3.length] = new  Option(area[i][ 2 ],area[i][ 1 ]);
            }
        }    
    }
</ script >
< form  id ="f1"  name ="form1"  method ="post"  action ="" >
   < select  name ="s1"  onchange ="chgprovince(this.value);" >
     <!-- 第一级直接给出，或从数据库读出。  -->
     < option  value ="0" > --请选择-- </ option >
     < option  value ="1" > 广西 </ option >
     < option  value ="2" > 广东 </ option >
     < option  value ="3" > 湖南 </ option >
     < option  value ="4" > 湖北 </ option >
    
   </ select >
   < select  name ="s2"  onchange ="chgcity(this.value);" >
     < option  value ="0" > --请选择-- </ option >     
   </ select >
   < select  name ="s3" >
     < option  value ="0" > --请选择-- </ option >     
   </ select >
</ form >