ASP+JS三级连动下拉框-优快云博客

本文介绍了一种使用JavaScript实现的三级联动下拉菜单的方法。通过动态生成选项并响应选择变化，实现了一级、二级和三级分类之间的联动效果。

<%
'OK工作室 http://ok123.k989.com
'sort   一级分类表:sort_id,sort_name
'nsort 二级分类表:nsort_id,sort_id,nsort_name
'nnsort 三级分类表:nnsort_id,nsort_id,nnsort_name
%>

<%
dim count
set rs=server.createobject("adodb.recordset")
sql="select * from nsort"
rs.open sql,conn,1,3
%>
<script language = "JavaScript">
var onecount;
onecount=0;
subcat = new Array();
        <%
        count = 0
        do while not rs.eof
        %>
subcat[<%=count%>] = new Array("<%= trim(rs("nsort_name"))%>","<%= trim(rs("sort_id"))%>","<%= trim(rs("nsort_id"))%>");
        <%
        count = count + 1
        rs.movenext
        loop
        rs.close
        %>
onecount=<%=count%>;

function changelocation(locationid)
{
document.form.nsort_id.length = 0;

    var locationid=locationid;
document.form.nsort_id.options[0] = new Option('二级分类', '');
    var i;
    for (i=0;i < onecount; i++)
        {
            if (subcat[i][1] == locationid)
            {
                document.form.nsort_id.options[document.form.nsort_id.length] = new Option(subcat[i][0], subcat[i][2]);
            }
        }

    }
</script>

<%
sql = "select * from nnsort"
rs.open sql,conn,1,1
%>
<script language = "javascript">
var onecount2;
onecount2=0;
subcat2 = new Array();
<%
count2 = 0
do while not rs.eof
%>
subcat2[<%=count2%>] = new Array("<%= trim(rs("nnsort_name"))%>","<%= trim(rs("nsort_id"))%>","<%= trim(rs("nnsort_id"))%>");
<%
count2 = count2 + 1
rs.movenext
loop
rs.close
%>
onecount2=<%=count2%>;

function changelocation2(locationid)
{
document.form.nnsort_id.length = 0;

var locationid=locationid;
var j;
document.form.nnsort_id.options[0] = new Option('三级分类','');
for (j=0;j < onecount2; j++)
{
if (subcat2[j][1] == locationid)
{
document.form.nnsort_id.options[document.form.nnsort_id.length] = new Option(subcat2[j][0], subcat2[j][2]);
}
}

}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS三级连动下拉框</title>
</head>