[紧急求教]如何制作这种三级联动的右拉菜单

Question

所有的父子菜单全部放在这个数据库表里面：
TopicID int
TopicName nvarchar
parentID int
要求：一级菜单固定不变、点击一级菜单出现二级菜单，点击二级菜单在出现三级菜单，二、三级菜单要求后台可维护（增、删、改）诚心求教、小弟第一份开发工作就遇到这个难题，先谢谢大家了！

Answer 1

菜单的效果可以用javascript实现，比如说做成树形菜单

Answer 2

做三个下拉列表框,分别叫d1,d2,d3
d2,d3的autopostback=ture;
d2绑定到"select TopicName from 表 where parentID=
(select TopicID from 表 where TopicName='"+d1.SelectValue+"')"
d3依照d2的来就可以啦至于后台就做个界面直接改就行,
不过我觉得你还应该加上一个字段TClass表示是几级菜单

Answer 3

<script>//------------- 构建 主菜单 对象 -------------//function MouseMenu(objName)
{
this.id    = "Menu_"+objName;
this.obj   = objName;
this.length  = 0;


this.addMenu = addMenu;
this.addLink = addLink;
this.addHR   = addHR;

JustMenuID = this.id;
  document.body.insertAdjacentHTML('beforeEnd','<table id="'+this.id+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>');
}//----------- 构建 子菜单 对象 -------------//function SubMenu(objName,objID)
{
this.obj = objName;
this.id  = objID; this.addMenu = addMenu;
this.addLink = addLink;
this.addHR   = addHR; this.length  = 0;
}
//-------------- 生成 菜单 makeMenu 方法 -----------//
function makeMenu(subID,oldID,word,icon,url,target,thetitle)
{
var thelink = '';
if(icon&&icon!="")
{
icon = '<img border="0" src="'+IconList[icon].src+'">';
}
else
{
icon = '';
}

if(!thetitle||thetitle=="")
{
thetitle = '';
}


if(url&&url!="")
{
thelink += '<a href="'+url+'" ';

if(target&&target!="")
{
thelink += '  ';
thelink += 'target="'+target+'" '
}

thelink += '></a>';
}

var Oobj = document.getElementById(oldID); /*--------------------------------------------- 菜单html样式

  <tr class="menutrout" id="trMenu_one_0" title="I am title">
      <td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td>
      <td><a href="javascript:alert('I am menu');" target="_self"></a><nobr>菜单一</nobr></td>
      <td class="menutd1">4</td>
      <td class="menutd2">&nbsp;</td>
    </tr>
--------------------------------------------------*/

Oobj.insertRow();
with(Oobj.rows(Oobj.rows.length-1))
{
id  = "tr"+subID;
className = "menutrout";

title       = thetitle; }

eventObj = "tr"+subID;

eval(eventObj+'.attachEvent("onmouseover",MtrOver('+eventObj+'))');
eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');

var trObj = eval(eventObj); for(i=0;i<4;i++)
{
trObj.insertCell();
} with(Oobj.rows(Oobj.rows.length-1))
{
cells(0).className = "menutd0";
cells(0).innerHTML = icon; cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>';
cells(1).calssName = "indentWord"

cells(2).className = "menutd1";
cells(2).innerHTML = "4";

cells(3).className = "menutd2";
cells(3).innerText = " ";

}



document.body.insertAdjacentHTML('beforeEnd','<table id="'+subID+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>');



}
//---------------- 生成连接 makeLink 方法 ------------//
function makeLink(subID,oldID,word,icon,url,target,thetitle)
{


var thelink = '';

if(icon&&icon!="")
{
icon = '<img border="0" src="'+IconList[icon].src+'">';
}
else
{
icon = '';
}

if(!thetitle||thetitle=="")
{
thetitle = '';
}


if(url&&url!="")
{
thelink += '<a href="'+url+'" ';

if(target&&target!="")
{
thelink += '  ';
thelink += 'target="'+target+'" '
}

thelink += '></a>';
}

var Oobj = document.getElementById(oldID);


/*--------------------------------------------- 连接html样式

  <tr class="menutrout" id="trMenu_one_0" title="I am title">
      <td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td>
      <td><a href="javascript:alert('I am link');" target="_self"></a><nobr>连接一</nobr></td>
      <td class="linktd1"></td>
      <td class="menutd2">&nbsp;</td>
    </tr>
--------------------------------------------------*/

Oobj.insertRow();
with(Oobj.rows(Oobj.rows.length-1))
{
id  = "tr"+subID;
className = "menutrout";
title       = thetitle; }

eventObj = "tr"+subID;

eval(eventObj+'.attachEvent("onmouseover",LtrOver('+eventObj+'))');
eval(eventObj+'.attachEvent("onmouseout",LtrOut('+eventObj+'))');
eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');

var trObj = eval(eventObj); for(i=0;i<4;i++)
{
trObj.insertCell();
} with(Oobj.rows(Oobj.rows.length-1))
{
cells(0).className = "menutd0";
cells(0).innerHTML = icon; cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>'; cells(2).className = "linktd1";
cells(2).innerText = " ";

cells(3).className = "menutd2";
cells(3).innerText = " ";

} }
//-------------- 菜单对象 addMenu 方法 ------------//
function addMenu(word,icon,url,target,title)
{
var subID    = this.id + "_" + this.length;
var subObj  = this.obj+"["+this.length+"]";

var oldID   = this.id;

eval(subObj+"= new SubMenu('"+subObj+"','"+subID+"')");

 makeMenu(subID,oldID,word,icon,url,target,title);
 
 this.length++;

}
//------------- 菜单对象 addLink 方法 -------------//
function addLink(word,icon,url,target,title)
{
var subID    = this.id + "_" + this.length;
var oldID  = this.id;

 makeLink(subID,oldID,word,icon,url,target,title);
 
 this.length++;
}//------------ 菜单对象 addHR 方法 -----------------//
function addHR()
{
var oldID = this.id; var Oobj = document.getElementById(oldID);

Oobj.insertRow();

/*------------------------------------------

 <tr>
      <td colspan="4">
<hr class="menuhr" size="1" width="95%">
       </td>
    </tr>

--------------------------------------------*/
Oobj.rows(Oobj.rows.length-1).insertCell(); with(Oobj.rows(Oobj.rows.length-1))
{
cells(0).colSpan= 4;
cells(0).insertAdjacentHTML('beforeEnd','<hr class="menuhr" size="1" width="95%">');
}

}
//--------- MtrOver(obj)-------------------//
function MtrOver(obj)
{
return sub_over;

function sub_over()
{

var sonid = obj.id.substring(2,obj.id.length);

var topobj = obj.parentElement.parentElement; 

NowSubMenu = topobj.id;

if(obj.className=="menutrout")
{
mouseWave();
}

HideMenu(1);

SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu; ShowTheMenu(sonid,MPreturn(sonid))

SubMenuList[returnIndex(obj.id)] = sonid;

if(topobj.oldTR)
{ 
eval(topobj.oldTR+'.className = "menutrout"'); 
}  obj.className = "menutrin";  topobj.oldTR = obj.id; 
}
}//--------- LtrOver(obj)-------------------//
function LtrOver(obj)
{
return sub_over;

function sub_over()
{
var topobj = obj.parentElement.parentElement;  NowSubMenu = topobj.id;

HideMenu(1);

SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu;

if(topobj.oldTR)
{ 
eval(topobj.oldTR+'.className = "menutrout"'); 
}  obj.className = "menutrin";  topobj.oldTR = obj.id;  }
}

Answer 4

//--------- LtrOut(obj)-------------------//
function LtrOut(obj)
{
return sub_out;

function sub_out()
{
var topobj = obj.parentElement.parentElement; 

obj.className = "menutrout"; 

topobj.oldTR = false; 
}
}//----------MtrClick(obj)-----------------//function MtrClick(obj)
{
return sub_click;

function sub_click()
{
if(obj.cells(1).all.tags("A").length>0)
{
obj.cells(1).all.tags("A")(0).click();
} }
}
//---------- returnIndex(str)--------------//function returnIndex(str)
{
return (str.split("_").length-3)
}
//---------ShowTheMenu(obj,num)-----------------//function ShowTheMenu(obj,num)
{
var topobj = eval(obj.substring(0,obj.length-2));

var trobj  = eval("tr"+obj);

var obj = eval(obj);

if(num==0)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft +topobj.offsetWidth;
pixelTop  = topobj.style.pixelTop + trobj.offsetTop;
}
}
if(num==1)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft + topobj.offsetWidth;
pixelTop  = topobj.style.pixelTop  + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;
}
}
if(num==2)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft -  obj.offsetWidth;
pixelTop  = topobj.style.pixelTop + trobj.offsetTop;
}
}
if(num==3)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft -  obj.offsetWidth;
pixelTop  = topobj.style.pixelTop  + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;
}
}

obj.style.visibility  = "visible"; 

if(obj.alphaing)
{
clearInterval(obj.alphaing);
}

obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed);
}//----------HideMenu(num)-------------------///*----------------------
var SubMenuList = new Array();var NowSubMenu = ""; ---------------------*/function HideMenu(num)
{
var thenowMenu = "";

var obj = null;

if(num==1)
{
thenowMenu = NowSubMenu
}



for(i=SubMenuList.length-1;i>=0;i--)
{
if(SubMenuList[i]&&SubMenuList[i]!=thenowMenu)
{

obj = eval(SubMenuList[i]);

if(obj.alphaing)
{
clearInterval(obj.alphaing);
} obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed);

obj.style.visibility = "hidden";

eval("tr"+SubMenuList[i]).className = "menutrout";

SubMenuList[i] = null;
}
else
{
if(SubMenuList[i]==thenowMenu)
{
return;
}
}
}

NowSubMenu = "";
}
//-----------MainMenuPosition return()------------//function MMPreturn()
{
var obj = eval(JustMenuID);

var x = event.clientX;
var y = event.clientY;

var judgerX = x + obj.offsetWidth;
var judgerY = y + obj.offsetHeight; var px = 0;
var py = 0;

if(judgerX>document.body.clientWidth)
{
px = 2;
}
if(judgerY>document.body.clientHeight)
{
py = 1;
}

return (px+py);
}//-----------MenuPosition return(obj)--------------//function MPreturn(obj)
{
var topobj = eval(obj.substring(0,obj.length-2));

var trobj  = eval("tr"+obj);

var x = topobj.style.pixelLeft + topobj.offsetWidth;
var y = topobj.style.pixelTop  + trobj.offsetTop; obj = eval(obj);

var judgerY =  obj.offsetHeight + y;
var judgerX =  obj.offsetWidth  + x;

var py = 0;
var px = 0;

if(judgerY>=document.body.clientHeight)
{
py = 1;
}

if(judgerX>= document.body.clientWidth)
{
px = 2;
} 

return (px+py);
}//-----------mouseWave()-------------//function mouseWave()
{
if(mouseCanSound)
{
theBS.src= "images/popmenu/sound.wav";
}
}//----------- menu_alpha_down -------//function menu_alpha_down(obj,num)
{
var obj = eval(obj);

if(obj.filters.Alpha.Opacity > 0 )
{
obj.filters.Alpha.Opacity += -num;
}
else
{
clearInterval(obj.alphaing);
obj.filters.Alpha.Opacity = 0;
obj.alphaing = false;
obj.style.visibility = "hidden";
}
}
//------------ menu_alpha_up --------//function menu_alpha_up(obj,num)
{
var obj = eval(obj);

if(obj.filters.Alpha.Opacity<100)
obj.filters.Alpha.Opacity += num;
else
{
clearInterval(obj.alphaing);
obj.filters.Alpha.Opacity = 100;
obj.alphaing = false;
}
}
//----------- IE ContextMenu -----------------//function document.oncontextmenu()
{
  var RangeType = document.selection.type;
if(RangeType != "Text" && event.srcElement.type!='text')
{
return false;
}
else
{
return true;
}
}
//----------- IE Mouseup ----------------//function document.onmouseup()
{
  var RangeType = document.selection.type;
if(event.button==2 && RangeType != "Text" && event.srcElement.type!='text')
{

HideMenu(0);
var obj = eval(JustMenuID)


obj.style.visibility = "hidden";


if(obj.alphaing)
{
clearInterval(obj.alphaing);
}

obj.filters.Alpha.Opacity = 0;

var judger = MMPreturn()

if(judger==0)
{
with(obj.style)
{
pixelLeft = event.clientX + document.body.scrollLeft;
pixelTop  = event.clientY + document.body.scrollTop;
}
}
if(judger==1)
{
with(obj.style)
{
pixelLeft = event.clientX + document.body.scrollLeft;
pixelTop  = event.clientY - obj.offsetHeight + document.body.scrollTop;
if (event.clientY - obj.offsetHeight<=document.body.scrollTop){ pixelTop=document.body.scrollTop}
}
}
if(judger==2)
{
with(obj.style)
{
pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft;
pixelTop  = event.clientY + document.body.scrollTop;
}
}
if(judger==3)
{
with(obj.style)
{
pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft;
pixelTop  = event.clientY - obj.offsetHeight + document.body.scrollTop;
if (event.clientY - obj.offsetHeight<=document.body.scrollTop){ pixelTop=document.body.scrollTop}
}
}

mouseWave();

obj.style.visibility = "visible";

obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed);

}
}//---------- IE MouseDown --------------//function document.onmousedown()
{
if(event.button==1)
{
HideMenu();

var obj = eval(JustMenuID)

if(obj.alphaing)
{
clearInterval(obj.alphaing);
}

obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed);

}
}
//----->
</script>

Answer 5

上面的只有两级，在写一个生成三级的函数调用就ok！
可以把上面的做成一个js文件，怎么提数据就自己高顶了哈！
把数据提出来后分别调用这些函数就是了！
eg:
one.addMenu("xxxxxxxx",7)//一级菜单
index+=1 one[index].addLink("xxxxxxxx","",url)//二级菜单
one[index].addLink("xxxxxxxxx","",url)xxxxxxx为你提出来的菜单名字，url为你要连接的地址！
最好做成方法！

Answer 6

http://truly.cnblogs.com/archive/2005/08/11/212094.html

Answer 7

用javascript吧http://www.51windows.net/hw/asp/myjs.htm

Answer 8

————————————————————————————
http://www.81M.Net网页设计超市，你的问题或许里面能找到
Http://Free.81M.Net免费空间站

Answer 9

弱弱地问一下，那个one是怎么生成的？

Answer 10

TO：dingsongtao(一翁倾尘『舍得』) 这两大堆怎么用啊？能否做成一个例子?谢谢

Answer 11

再顶一下，小弟刚毕业，找的一份.net的工作，希望各位前辈不吝赐教