多级关联菜单数据库版

 

< html >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " >
< meta name = " GENERATOR "  content = " Microsoft FrontPage 4.0 " >
< meta name = " ProgId "  content = " FrontPage.Editor.Document " >
< title > 多级关联菜单数据库版 </ title >
< ! --
数据库:test.mdb
表:dbselect
表结构:id(自增) school(文本) department(文本) grade(文本) student(文本)
IE6,NS7,Mozilla下测试通过
-->
</ head >  

< body >
< form name = " frm " >
< select  name = school onchange = " MulSelect(1) " ></ select >
< select  name = department onchange = " MulSelect(2) " ></ select >
< select  name = grade onchange = " MulSelect(3) " ></ select >
< select  name = student ></ select >
</ 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 >

</ body >
</ html >