如何做树型菜单下拉菜单

fbchenyong 2003-12-10 04:57:36
我想做一个树型下拉菜单，比如说点击"栏目汇编"，然后出现下边的下拉菜单，显示"栏目1"，"栏目2"，"栏目3"，时间比较紧，在线等待，解决立刻给分。
...全文
101 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
fbchenyong 2003-12-10
  • 打赏
  • 举报
 回复
tigerwen01(小虎)(编程艺术化) ，不好意思，你的代码完成正确，刚才是我弄错了，谢谢大家。
fbchenyong 2003-12-10
  • 打赏
  • 举报
 回复
tigerwen01(小虎)(编程艺术化) ,你的代码运行起来有错误。提示scores未定义。
tigerwen01 2003-12-10
  • 打赏
  • 举报
 回复
图片自己找：

<HTML><HEAD><TITLE>树形菜单(一)</TITLE>
<link REL=stylesheet HREF="../style.css" type="text/css">
<SCRIPT language=JavaScript1.2>
scores = new Array(20);var numTotal=0;NS4 = (document.layers) ? 1 : 0;IE4 = (document.all) ? 1 : 0;ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) { with (document) { write("<STYLE TYPE='text/css'>"); if (NS4) { write(".parent {position:absolute; visibility:visible}"); write(".child {position:absolute; visibility:visible}"); write(".regular {position:absolute; visibility:visible}") } else { write(".child {display:none}") } write("</STYLE>"); }}function getIndex(el) { ind = null; for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id == el) { ind = i; break; } } return ind;}function arrange() { nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height; for (i=firstInd+1; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.visibility != "hide") { whichEl.pageY = nextY; nextY += whichEl.document.height; } }}function initIt(){ if (!ver4) return; if (NS4) { for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; } arrange(); } else { divColl = document.all.tags("DIV"); for (i=0; i<divColl.length; i++) { whichEl = divColl(i); if (whichEl.className == "child") whichEl.style.display = "none"; } }}function expandIt(el) { if (!ver4) return; if (IE4) { whichEl1 = eval(el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval(scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.style.display = "none"; } } whichEl1 = eval(el + "Child"); if (whichEl1.style.display == "none") { whichEl1.style.display = "block"; } else { whichEl1.style.display = "none"; } } else { whichEl = eval("document." + el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval("document." + scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.visibility = "hide"; } } if (whichEl.visibility == "hide") { whichEl.visibility = "show"; } else { whichEl.visibility = "hide"; } arrange(); }}onload = initIt;
</SCRIPT>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="Microsoft FrontPage 4.0" name=GENERATOR>
<base target="main">
</HEAD>
<BODY leftmargin="0" topmargin="0" bgcolor="#D6E2CB" link="#008000" vlink="#008000" alink="#008000">

<div align="left">
<TABLE border="1" cellspacing="0" cellpadding="0" bordercolorlight="#999999" bordercolordark="#FFFFFF" width=236 cellspacing="6" bgcolor="#D6E2CB">
<TBODY>
<TR>
<TD HEIGHT=30 width="214">
<p style="margin-top: 3" align="center"><span style="font-family: 宋体; mso-ascii-font-family: \000B; mso-hansi-font-family: \000B; mso-bidi-font-family: Times New Roman; mso-font-kerning: 1.0pt; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA"><font color="#800000" size="2">请点击文件夹</font></span><span style="font-family: 宋体; mso-ascii-font-family: \000B; mso-hansi-font-family: \000B; mso-bidi-font-family: Times New Roman; mso-font-kerning: 1.0pt; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA"><font size="4"> </font></span>
</TD></TR>
<CENTER>

<TR>
<TD align=left width="214">
<DIV class=parent id=KB1Parent>
<A href="http://202.195.195.145/navi01.htm#" onclick="expandIt('KB1'); return false">
<IMG border=0 src="plus.gif" width="34" height="19"><font size="2">第一届（1982年）</font></A></DIV>
<DIV class=child id=KB1Child>
<font size="2">
<img border="0" src="line.gif" width="13" height="20"><A href="11.htm" target="main">
<IMG border=0 src="blank.gif" width="33" height="19">《东方》</A><BR>
<img border="0" src="line.gif" width="13" height="20"><a href="12.htm">
<IMG border=0 src="blank.gif" width="33" height="19">《许茂和他的女儿们》</a><BR>
<img border="0" src="line.gif" width="13" height="20"><a href="13.htm">
<IMG border=0 src="blank.gif" width="33" height="19">《李自成》（第二卷）</a><BR>
<img border="0" src="line.gif" width="13" height="20"></font><a href="14.htm">
<font size="2">
<IMG border=0 src="blank.gif" width="33" height="19">《白居易》</font></a><font size="2"><BR>
<img border="0" src="line.gif" width="13" height="20"><a href="15.htm">
<IMG border=0 src="blank.gif" width="33" height="19">《芙蓉镇》</a><BR>
<img border="0" src="line.gif" width="13" height="20"><a href="16.htm">
<IMG border=0 src="blank2.gif" width="33" height="19">《将军吟》</a></font></DIV>
<DIV class=parent id=KB2Parent>
<A href="http://www.kings2.net/code/navigation/navi01.htm#" onclick="expandIt('KB2'); return false">
<font size="2">
<IMG border=0 src="plus.gif" width="34" height="19">第二届（1985年）</font></A></DIV>
<DIV class=child id=KB2Child>
<font size="2">
<img border="0" src="line.gif" width="13" height="20"><a href="21.htm">
<IMG border=0 src="blank.gif" width="33" height="19">《沉重的翅膀》</a><BR>
<img border="0" src="line.gif" width="13" height="20"><a href="22.htm">
zl13 2003-12-10
  • 打赏
  • 举报
 回复
产品大类别：
<select name="bigtype" onChange="javascript:populateType1(document.form2,document.form2.bigtype);" style="width:150px" class="select"> <option selected value='' selected>选择大类别</option>
<%
set rs=server.createobject("adodb.recordset")
sql="select * from type where (level=0 and typecode like '10%')"
rs.open sql,conn,1,1
temp=1
do while not rs.eof
response.write "<option value=A"+cstr(temp)+">"+rs("type1")+"</option>"
temp=temp+1
rs.movenext
loop
rs.close
set rs=nothing
%> </select>
</td>
</tr></tbody>
<tbody><tr>
<td width="12%"></td>
<td>产品小类别：
<select name="smalltype" class="select"> <option selected value='' selected>选择小类别</option> </select>
</td>
</tr></tbody>
</tbody>
</table>
</center>
</div>
</td>
</tr></tbody>
<tr align="right">
<td width=375 colspan=2 height=22>
<p align=center>
<input type=submit value=" 查 询 " ><INPUT TYPE="hidden" name=action value="search">
         <br>
      　   </p>
</td>

页面要包含makeselect.asp文件
<%
set rs=server.createobject("adodb.recordset")
sql="select * from type where (level=0 and typecode like '10%')"
rs.open sql,conn,1,1
response.write "<SCRIPT LANGUAGE=JavaScript>"+chr(13)+chr(10)
temp=1
response.write "var Array1 = new Array("+chr(34)+"('"+"选择大类别"+"')"+chr(34)+");"+chr(10)
response.write "var ArrayB1 = new Array("+chr(34)+"('"+"选择小类别"+"')"+chr(34)+");"+chr(10)
do while not rs.eof
code=left(rs("typecode"),4)
set rs1=server.createobject("adodb.recordset")
sql1="select * from type where (level=1 and typecode like '"+code+"%')"
rs1.open sql1,conn,1,1
stra= ""
strb= ""
stra=stra+"var A"+cstr(temp)+"Array1 = new Array("+chr(34)+"('"+rs("type1")+"')"+chr(34)
strb=strb+"var A"+cstr(temp)+"ArrayB1 = new Array("+chr(34)+"('"+cstr(rs("typecode"))+"')"+chr(34)
do while not rs1.eof
stra=stra+ ","+chr(34)+"('"+rs1("type2")+"')"+chr(34)
strb=strb+ ","+chr(34)+"('"+cstr(rs1("typecode"))+"')"+chr(34)
rs1.movenext
loop
stra=stra+");"
strb =strb+ ");"
response.write stra+chr(10)
response.write strb+chr(10)
temp=temp+1
rs.movenext
loop
rs.close
'rs1.close
response.write "</SCRIPT>"

%>
<SCRIPT LANGUAGE="JavaScript">
<!--
function populateType1(inForm,selected)

{
eval("var selectedArray1 ="+selected.value + "Array1;");

eval("var selectedB1 ="+selected.value + "ArrayB1;");

while (selectedArray1.length < inForm.smalltype.options.length) {

inForm.smalltype.options[(inForm.smalltype.options.length - 1)] = null;

}

for (var i=0; i < selectedArray1.length; i++) {

eval("inForm.smalltype.options[i] =" + "new Option" + selectedArray1[i]);


eval("inForm.smalltype.options[i].value =" + selectedB1[i]);
if(i==1)
{
eval("inForm.smalltype.options[1].check=" + "selected");
}
}
}
//-->
</SCRIPT>
hxn8203 2003-12-10
  • 打赏
  • 举报
 回复
可以把子菜单做到DIV中，把DIV的style.display设为"none".

<div id="menu" style="display:none">dfsdflhfsd</div>
脚本：
sub topmenu_onmouseover'就是鼠标移动到菜单上的事件，也可能是onmouseon
menu.style.display="inline" '显示子菜单。
end sub
sub topmenu_onmouseout'就是鼠标移开的事件
menu.style.display="none" '隐藏子菜单。
end sub
漂亮的JS多级树型下拉菜单
漂亮的JS多级树型下拉菜单。 漂亮的JS多级树型下拉菜单
jQuery地区树型菜单选择插件
jQuery地区树型菜单选择插件.。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
树型菜单的
树型菜单树型菜单树型菜单
js实现树型下拉菜单
用js实现树型下拉菜单
树型菜单和分支菜单
NULL 博文链接：https://java-frog.iteye.com/blog/310076
ASP

28,407

社区成员

356,948

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章