ASP+JS实现数据库驱动的三级联动下拉菜单

ASP+JS三级联动菜单实现原理

网络上常见的三级菜单实现方案往往代码繁琐，本示例提供了一种更为直观的解决方案。

首先必须确保已正确连接数据库，这是基础前提。

接下来需要了解数据库的具体结构设计。

一级类别表名为a，包含字段ID和Name。其中ID为主键，代表一级类别的ID值；Name存储一级类别的名称。

二级类别表名为aa，包含字段ID、aID和Name。ID为主键，代表二级类别的ID值；aID关联所属一级类别的ID值；Name存储二级类别的名称。

三级类别表名为aaa，包含字段ID、aID、aaID和Name。ID为主键，代表三级类别的ID值；aID关联所属一级类别的ID值；aaID关联所属二级类别的ID值；Name存储三级类别的名称。

可以使用test1.asp文件进行测试，该页面用于接收并输出所选类别的ID值。

Response.Write "1:" & Request.form("s1") & "<BR>"

Response.Write "2:" & Request.form("s2") & "<BR>"

Response.Write "3:" & Request.form("s3") & "<BR>"

<!-- 三级联动菜单 开始 -->
<script language="JavaScript">
<!-- 
<% 
'将二级数据保存到数组中
Dim count2,rsClass2,sqlClass2
Set rsClass2=Server.CreateObject("ADODB.Recordset")
sqlClass2="select * from aa"
rsClass2.Open sqlClass2,conn,1,1
%> 
var subval2 = new Array();
//数组结构：一级根值,二级根值,二级显示值
<% 
count2 = 0
Do While Not rsClass2.EOF
%> 
subval2(<%=count2%>) = new Array('<%=rsClass2("aID")%>','<%=rsClass2("ID")%>','<%=rsClass2("Name")%>')
<% 
count2 = count2 + 1
rsClass2.MoveNext
Loop
rsClass2.Close
%> 
<% 
'将三级数据保存到数组中
Dim count3,rsClass3,sqlClass3
Set rsClass3=Server.CreateObject("ADODB.Recordset")
sqlClass3="select * from aaa"
rsClass3.Open sqlClass3,conn,1,1
%> 
var subval3 = new Array();
//数组结构：二级根值,三级根值,三级显示值
<% 
count3 = 0
Do While Not rsClass3.EOF
%> 
subval3(<%=count3%>) = new Array('<%=rsClass3("aaID")%>','<%=rsClass3("ID")%>','<%=rsClass3("Name")%>')
<% 
count3 = count3 + 1
rsClass3.MoveNext
Loop
rsClass3.Close
%> 
function changeselect1(locationid)
{ 
document.form1.s2.length = 0;
document.form1.s2.options[0] = new Option('==请选择类别==','');
document.form1.s3.length = 0;
document.form1.s3.options[0] = new Option('==请选择专题==','');
for (i=0; i<subval2.length; i++)
    { 
if (subval2[i][0] == locationid)
{document.form1.s2.options[document.form1.s2.length] = new Option(subval2[i][2],subval2[i][1]);}
    } 
} 
function changeselect2(locationid)
{ 
document.form1.s3.length = 0;
document.form1.s3.options[0] = new Option('==请选择专题==','');
for (i=0; i<subval3.length; i++)
    { 
if (subval3[i][0] == locationid)
{document.form1.s3.options[document.form1.s3.length] = new Option(subval3[i][2],subval3[i][1]);}
    } 
} 
//--> 
</script>
<form name="form1" method="post" action="test1.asp">
三级联动：
<% 
Dim count1,rsClass1,sqlClass1
Set rsClass1=Server.CreateObject("ADODB.Recordset")
sqlClass1="select * from a"
rsClass1.Open sqlClass1,conn,1,1
%> 
<select name="s1" onChange="changeselect1(this.value)">
<option>==请选择频道==</option>
<% 
count1 = 0
Do While Not rsClass1.EOF
Response.Write"<option value="&rsClass1("ID")&">"&rsClass1("Name")&"</option>"
count1 = count1 + 1
rsClass1.MoveNext
Loop
rsClass1.Close
%> 
</select>
<select name="s2" onChange="changeselect2(this.value)">
<option>==请选择类别==</option>
</select>
<select name="s3">
<option>==请选择专题==</option>
</select>
<input type="submit" name="Submit" value="提交"></form>
<!-- 三级联动菜单 结束 -->