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>