首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

帮小弟我实现一个动态联动菜单,送分20

2012-03-03 
帮我实现一个动态联动菜单,送分20!我的动态联动菜单源代码如下:!--#includefile conn/conn.asp --!-

帮我实现一个动态联动菜单,送分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,即当选择第一组菜单以后,再去数据库中查询第二组的数据,这样效率会高一些。

热点排行