<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>
|