<form name="frm">
<select name=school onchange="MulSelect(1)"></select>
<select name=department onkeypress=sortMe(this) onchange="MulSelect(2)"></select>
<select name=grade onchange="MulSelect(3)"></select>
<select name=student></select>
<p>　</p>
</form>

<script>
// 四级联动
var arrSel=["school","department","grade","student"]
arrData=[];

// 从数据库中读出四级联动的数据, 保存到 arrData 数组中(二维数组)
<%
dim conn,rs
set conn = Server.CreateObject("ADODB.Connection")
conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("test.mdb") & ";Persist Security Info=False"
set rs=conn.execute("select * from dbselect")
do while not rs.eof
%>

arrData[arrData.length]=["<%=trim(rs("school"))%>","<%=trim(rs("department"))%>","<%=trim(rs("grade"))%>","<%=trim(rs("student"))%>"]

<%
rs.movenext
loop
rs.close:set rs=nothing
conn.close:set conn=nothing
%>
</script>

<script>
// 下拉框选择变化时触发的函数，用于重新生成其下级下拉框
// num : 下拉框的级数, 1 表示最顶级
function MulSelect(num)
{
var i,j,arrTemp=[];
// 取得表单当前触发的下拉框的父级下拉框的值, 存放于 arrTemp 数组中(即不需要改变的值)
for(i=0;i<num;i++)
{
arrTemp[i]=eval("document.frm."+arrSel[i]).value
}
if(num<arrSel.length)
{
// 对于触发下拉框的下一级的下拉框
with(eval("document.frm."+arrSel[num]))
{
// 先清空内容
length=0
// 对所有的记录遍历
for(i=0;i<arrData.length;i++)
{
var find=false

// 如果父级下拉框的记录不是当前选中的值，则跳过
for(j=0;j<num;j++)
{
if(arrTemp[j]!=arrData[i][j])
{
break;
}
}
if(j!=num)
{
continue;
}
// 这里已经可以保证第 i 项记录的数据属于当前选项的子数据

// 检查循环过程中是否已经添加了该选项，如果已有了, 则 fine = true
for(m=0;m<options.length;m++)
{
if(options[m].text==arrData[i][num])
{
find=true
}
}
// 若当前没有选项或者尚未添加该选项项，则添加之
if(length==0||!find)
{
options[options.length]=new Option(arrData[i][num],arrData[i][num])
}
}

// 递归调用生成下一级菜单的内容
MulSelect((num+1))
}
}
}

// 调用联动函数初始化下拉框
MulSelect(0)
</script>

评论