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>