帮我实现一个动态联动菜单,送分20!
我的动态联动菜单源代码如下:
<!--#include file= "conn/conn.asp "-->
<!-- 三级联动菜单 开始 -->
<script language= "JavaScript ">
<!--
<%
'二级数据保存到数组
Dim count2,rsClass2,sqlClass2
set rsClass2=server.createobject( "adodb.recordset ")
sqlClass2= "select * from Sf_class "
rsClass2.open sqlClass2,conn,1,1
%>
var subval2 = new Array();
//数组结构:一级根值,二级根值,二级显示值
<%
count2 = 0
do while not rsClass2.eof
%>
subval2[ <%=count2%> ] = new Array( ' <%=rsClass2( "big_id ")%> ', ' <%=rsClass2( "sf_id ")%> ', ' <%=rsClass2( "two_Name ")%> ')
<%
count2 = count2 + 1
rsClass2.movenext
loop
rsClass2.close
%>
<%
'三级数据保存到数组
Dim count3,rsClass3,sqlClass3
set rsClass3=server.createobject( "adodb.recordset ")
sqlClass3= "select * from Ss_class "
rsClass3.open sqlClass3,conn,1,1
%>
var subval3 = new Array();
//数组结构:二级根值,三级根值,三级显示值
<%
count3 = 0
do while not rsClass3.eof
%>
subval3[ <%=count3%> ] = new Array( ' <%=rsClass3( "sf_id ")%> ', ' <%=rsClass3( "ss_id ")%> ', ' <%=rsClass3( "three_Name ")%> ')
<%
count3 = count3 + 1
rsClass3.movenext
loop
rsClass3.close
%>
<%
'三级数据保存到数组
Dim count4,rsClass4,sqlClass4
set rsClass4=server.createobject( "adodb.recordset ")
sqlClass4= "select * from St_class "
rsClass4.open sqlClass4,conn,1,1
%>
var subval4 = new Array();
//数组结构:二级根值,三级根值,三级显示值
<%
count4 = 0
do while not rsClass4.eof
%>
subval4[ <%=count4%> ] = new Array( ' <%=rsClass4( "ss_id ")%> ', ' <%=rsClass4( "st_id ")%> ', ' <%=rsClass4( "four_Name ")%> ')
<%
count4 = count4 + 1
rsClass4.movenext
loop
rsClass4.close
%>
function changeselect1(locationid)
{
document.form1.s2.length = 0;
document.form1.s2.options[0] = new Option( '==请选择类别== ', ' ');
document.form1.s3.length = 0;
document.form1.s3.options[0] = new Option( '==请选择专题== ', ' ');
document.form1.s4.length = 0;
document.form1.s4.options[0] = new Option( '==请选择专题== ', ' ');
for (i=0; i <subval2.length; i++)
{
if (subval2[i][0] == locationid)
{document.form1.s2.options[document.form1.s2.length] = new Option(subval2[i][2],subval2[i][1]);}
}
}
function changeselect2(locationid)
{
document.form1.s3.length = 0;
document.form1.s3.options[0] = new Option( '==请选择专题== ', ' ');
for (i=0; i <subval3.length; i++)
{
if (subval3[i][0] == locationid)
{document.form1.s3.options[document.form1.s3.length] = new Option(subval3[i][2],subval3[i][1]);}
}
}
function changeselect3(locationid)
{
document.form1.s4.length = 0;
document.form1.s4.options[0] = new Option( '==请选择专题== ', ' ');
for (i=0; i <subval4.length; i++)
{
if (subval4[i][0] == locationid)
{document.form1.s4.options[document.form1.s4.length] = new Option(subval4[i][2],subval4[i][1]);}
}
}
//-->
</script>
<form name= "form1 " method= "post " action= "index.asp?action=add ">
三级联动:
<%
Dim count1,rsClass1,sqlClass1
set rsClass1=server.createobject( "adodb.recordset ")
sqlClass1= "select * from Big_class "
rsClass1.open sqlClass1,conn,1,1
%>
<select name= "s1 " onChange= "changeselect1(this.value) " size= "5 ">
<option> ==请选择频道== </option>
<%
count1 = 0
do while not rsClass1.eof
response.write " <option value= "&rsClass1( "big_id ")& "> "&rsClass1( "one_Name ")& " </option> "
count1 = count1 + 1
rsClass1.movenext
loop
rsClass1.close
%>
</select>
<select name= "s2 " onChange= "changeselect2(this.value) " size= "5 ">
<option> ==请选择类别== </option>
</select>
<select name= "s3 " onChange= "changeselect3(this.value) " size= "5 ">
<option> ==请选择专题== </option>
</select>
<select name= "s4 " size= "5 ">
<option> ==请选择专题== </option>
</select>
<input type= "submit " name= "Submit " value= "提交 "> </form>
<!-- 三级联动菜单 结束 -->
<%
response.write "1: "&Request.form( "s1 ")& " <BR> "
response.write "2: "&Request.form( "s2 ")& " <BR> "
response.write "3: "&Request.form( "s3 ")& " <BR> "
response.write "4: "&Request.form( "s4 ")& " <BR> "
%>
菜单已经做好,但是不是最终想要的效果。
最终想要的效果像这个:http://www.wofeila.com/test/menu/menu.htm
-----如果前一级类别无包含小类,则变灰——亦即不能去点击选择。
或者把它做成从刚刚刷新页面时,只显示一级大类,当点击一级大类之后,显示出来二级,依此类推……
[解决办法]
楼主,你引用的示例是我做的,你参考我示例中第二段(页面内的XML数据源),用ASP将数据输出成如我在页面中写好的XML格式即可。
PS:对于动态数据,建议你使用AJAX,即当选择第一组菜单以后,再去数据库中查询第二组的数据,这样效率会高一些。