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>