二级联动asp下拉式列表菜单

Posted 2023-03-08

big表结构
ID(自动) bigclassName
内容，如：
1 北京
2 上海

small表结构
ID(自动) bigclassname smallclassname
1 北京 中关村地区
2 北京 国贸商圈
3 上海 黄埔
意思是big表为大类，small表为小类,big表的bigclassName与small表的smallclassname表是一对多的关系。
问题：我想做二级联动的下拉式列表菜单，选大类后，另一菜单为该大类下所有子类，得到二级联动列表菜单的值，采用调用数据库的形式，该怎么写呀？？

总体要求是这样的吧：选择big的下拉菜单后，从数据库获得所选择大项内的二级选项，更新到二级下拉菜单中
一级菜单没得说，直接数据库读取
二级菜单就可以用两种方法实现，
1、先预读出所有二级选项及对应一级选项的classname，待选择一级菜单后利用js更换二级菜单的选项
2、选择一级菜单后，再从数据库读取二级菜单选项，更新到二级菜单，可以隐含一个页面作为刷新，这种办法比较繁琐些
<script language=javascript>
//最先从数据库读取所有选项值
//allSel数组形如：((北京，中关村，国贸，天安门，....),(上海，黄埔，....).....)
//(北京，中关村，国贸，天安门，....)---->第一个为一级选项，后面为二级选项
var allSel=new Array();//储存所有一级、二级选项，定义成全局变量
var tmpSel=new Array();//临时选项 allSel.add(tmpSel) allSel 是数组的数组，即二维数组
<%
dim bNew
rs.open "select * from big,small where big.bigclassName=small.bigclassname order by big.bigclassname",1,3,conn
bNew=rs("big.bigclassname")
response.write "tmpSel=new Array();"
response.write "tmpSel.add('" & rs("big.bigclassname") & "');"
do while not rs.eof
if bNew<>rs("big.bigclassname") then '新城市
response.write "allSel.add(tmpSel);"
response.write "tmpSel=new Array();"
response.write "tmpSel.add(" & rs("big.bigclassname") & ")"
end if
rsponse.write "tmpSel.add('" & rs("small.smallclassname") & "');" ‘加入二级菜单
rs.movenext
loop
rs.close
%>
</script>
一级菜单：<select id=bigsel onchange=sel_chg(this)>
<%
rs.open "select * from big",conn,1,3
do while not rs.eof
response.write "<option value=" & rs("id") & ">" & rs("bigclassname") & "</option>"
rs.movenext
loop
rs.close
%>
</select>
二级菜单<select id=ssel><option value=-1>请选择...</option></select>
js实现更新二级菜单
<script language=javascript>
function chgOption(op_arr) //根据参数修改下拉菜单选项
var vOptions,iii;
var obj=document.all.ssel; //二级菜单obj
for(iii=0;iii<obj.length-1;iii++)obj.options.remove(0);//移除原二级菜单选项
for(iii=1;iii<op_arr.length;i++) //iii=1
vOptions=document.createElement("option");
vOptions.value=iii;
vOptions.text=op_arr[iii];
obj.options.add(vOptions);


function sel_chg(obj) //一级菜单选择后发起替换二级菜单
//获知是哪个选项被选中
var selIdx=obj.selectedIndex;
//根据之前的allSel替换二级菜单
chgOption(allSel[selIdx]);//注意这里调用allSel[selIdx]

</script> 参考技术A 这里有一个多级联动select菜单
你直接套进去就行了
里面有源码

参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?2=j&id=11685