二级联动asp下拉式列表菜单
big表结构ID(自动)bigclassName内容,如:1北京2上海small表结构ID(自动)bigclassnamesmallclassname1北京中关村地区2北...
big表结构
ID(自动) bigclassName
内容,如:
1 北京
2 上海
small表结构
ID(自动) bigclassname smallclassname
1 北京 中关村地区
2 北京 国贸商圈
3 上海 黄埔
意思是big表为大类,small表为小类,big表的bigclassName与small表的smallclassname表是一对多的关系。
问题:我想做二级联动的下拉式列表菜单,选大类后,另一菜单为该大类下所有子类,得到二级联动列表菜单的值,采用调用数据库的形式,该怎么写呀?? 展开
ID(自动) bigclassName
内容,如:
1 北京
2 上海
small表结构
ID(自动) bigclassname smallclassname
1 北京 中关村地区
2 北京 国贸商圈
3 上海 黄埔
意思是big表为大类,small表为小类,big表的bigclassName与small表的smallclassname表是一对多的关系。
问题:我想做二级联动的下拉式列表菜单,选大类后,另一菜单为该大类下所有子类,得到二级联动列表菜单的值,采用调用数据库的形式,该怎么写呀?? 展开
2个回答
展开全部
总体要求是这样的吧:选择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>
一级菜单没得说,直接数据库读取
二级菜单就可以用两种方法实现,
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>
2010-12-22
展开全部
这里有一个多级联动select菜单
你直接套进去就行了
里面有源码
你直接套进去就行了
里面有源码
参考资料: http://www.blueidea.com/common/shoutbox/redir.asp?2=j&id=11685
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询