求一个jsp里面的动态多级菜单的显示。

alphajin 2008-04-22 11:24:09

要求：
1.动态的现实菜单的内容，从数据库中读出。
2.当鼠标点到该菜单的时候，显示下一级菜单，并且把下一级菜单的内容从数据库中读出，并显示出来。
3.不确定有2级或3级，也就是说级数不定。

谢谢！

...全文

667 19 打赏收藏转发到动态举报

写回复

用AI写文章

19 条回复

切换为时间正序

请发表友善的回复…

发表回复

Bob_spark 2008-04-23

打赏
举报

JSP刚入门，AJAX还没接触

FAT0708 2008-04-23

打赏
举报

使用dtree，网上搜索吧，很多例子。

ssgue 2008-04-23

打赏
举报

网上好像有ASP的树形菜单，你可以把它改成JSP的，我之前自己改了一下。文件太乱了，一下子没有找到。找到后发发布到这里吧

zzkk_1980 2008-04-23

打赏
举报

[Quote=引用 2 楼 kokobox 的回复:]
lz 可以用动态树

网上很多，梅花雪的那些都可以实现你的效果

利用ajax请求后台取出下级菜单，无论多少级，都可以请求回来。
[/Quote]

alphajin 2008-04-23

打赏
举报

还有一个要求可能没有说清楚

那就是菜单能够向右展开。

谢谢！

小南瓜瓜 2008-04-23

打赏
举报

用ajax~很容易实现
或者考虑用树结构

Defonds 2008-04-23

打赏
举报

2楼的方法就可以了

limon758 2008-04-23

打赏
举报

给你个3级级连菜单

<FORM name="isc">

<table border="0" cellspacing="0" cellpadding="0">

  <tr align="center"> 

    <td nowrap height="11">  



<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">

<option selected>---Select1-------------</option>

<option>Webmaster Sites</option>

<option>News Sites</option>

</select>



<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">

<option value=" " selected> </option>

<option value=" " selected>---Select2--------------</option>

<option value=" " selected>---Select2--------------</option>

</select>



<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">

<option value=" " selected> </option>

<option value=" " selected>---Select3----------------</option>

<option value=" " selected>---Select3----------------</option>

</select>



<script>

<!--



/*

Triple Combo Script Credit

By Hamid Cheheltani/ Website Abstraction (http://www.wsabstract.com)

Visit http://wsabstract.com for this and over 400+ other scripts

*/



var groups=document.isc.example.options.length

var group=new Array(groups)

for (i=0; i<groups; i++)

group[i]=new Array()



group[0][0]=new Option("---Select2---"," ");



group[1][0]=new Option("Now Select This One"," ");

group[1][1]=new Option("JavaScript","47");

group[1][2]=new Option("DHTML","46");

group[1][3]=new Option("CGI","45");



group[2][0]=new Option("Now Select This One"," ");

group[2][1]=new Option("General News","115");

group[2][2]=new Option("Technology News","116"); 



var temp=document.isc.stage2





function redirect(x){

for (m=temp.options.length-1;m>0;m--)

temp.options[m]=null

for (i=0;i<group[x].length;i++){

temp.options[i]=new Option(group[x][i].text,group[x][i].value)

}

temp.options[0].selected=true

redirect1(0)

}







var secondGroups=document.isc.stage2.options.length

var secondGroup=new Array(groups)

for (i=0; i<groups; i++)  {

secondGroup[i]=new Array(group[i].length)

for (j=0; j<group[i].length; j++)  {

secondGroup[i][j]=new Array()  }}



secondGroup[0][0][0]=new Option("---Select 3---"," ");

secondGroup[1][0][0]=new Option("---Select 3---"," ");

secondGroup[1][1][0]=new Option("Now Select This One"," ");

secondGroup[1][1][1]=new Option("Website Abstraction","http://wsabstract.com");

secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher.com/javascript/");

secondGroup[1][1][3]=new Option("Java-Scripts.net","http://java-scripts.net");



secondGroup[1][2][0]=new Option("Now Select This One"," ");

secondGroup[1][2][1]=new Option("Dynamic Drive","http://www.dynamicdrive.com");

secondGroup[1][2][2]=new Option("Beginner\'s Guide to DHTML","http://www.geocities.com/ResearchTriangle/Facility/4490/");

secondGroup[1][2][3]=new Option("Web Coder","http://webcoder.com/");



secondGroup[1][3][0]=new Option("Now Select This One"," ");

secondGroup[1][3][1]=new Option("CGI Resources","http://www.cgi-resources.com");

secondGroup[1][3][2]=new Option("Ada\'s Intro to CGI","http://adashimar.hypermart.net/");



secondGroup[2][0][0]=new Option("---Select 3---"," ");

secondGroup[2][1][0]=new Option("Now Select This One"," ");

secondGroup[2][1][1]=new Option("CNN","http://www.cnn.com");

secondGroup[2][1][2]=new Option("MSNBC","http://www.msnbc.com");

secondGroup[2][1][3]=new Option("ABC News","http://www.abcnews.com");



secondGroup[2][2][0]=new Option("Now Select A Page"," ");

secondGroup[2][2][1]=new Option("News.com","http://www.news.com");

secondGroup[2][2][2]=new Option("Wired","http://www.wired.com");



var temp1=document.isc.stage3

function redirect1(y){

for (m=temp1.options.length-1;m>0;m--)

temp1.options[m]=null

for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){

temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)

}

temp1.options[0].selected=true

}



function redirect2(z){

window.location=temp1[z].value

}



//-->

</script>



		</td>

  </tr>

</table>

</FORM>



<p><font face="arial" size="-2">This free script provided by</font><br>

<font face="arial, helvetica" size="-2"><a href="http://wsabstract.com">Website

Abstraction</a></font></p>

alphajin 2008-04-23

打赏
举报

谢谢各位，你们所说我的我都找过了。不能够满足我的需求

我现在就是用css去做的

srss008 2008-04-23

打赏
举报

用树形结构会好一些，用下来列表的话需要新的列表显示下级菜单

chengweiv5 2008-04-23

打赏
举报

可以使用javascript来实现，大概步骤是先取出数据，然后用这些数据建立一个javascript数组，然后写javascript函数，判断上一级菜单选取的是哪一个父菜单，然后在从子数组中取出对应的数据填充到子菜单中。也可以借机会学一下javascript，因为对jsp辅助作用还是很大的。很多动态效果都可以实现。

海边岩石 2008-04-23

打赏
举报

楼主说的很清楚啊，是要读取数据库的数据。
那些在页面写号数据的代码就不要贴出来了。
累不累啊……

不过楼主，在这里求完整代码是不好给出的，
大家之所以建议你去搜一下就是因为你的这个需求不是一两句话
就能说清楚的，所以我也一样建议你去搜一下吧。
网上真个真的很多，而且说的很明白，对你的学习也有很大的帮助。

kingdomofhavean 2008-04-23

打赏
举报

<html>
<head>
<script language=javascript>
var arr="浙江|江苏|安徽|江西";

var arr0 = "杭州|宁波|温州|绍兴"; //这些数据可以从数据库中取得
var arr1 = "南京|苏州|无锡|常州";
var arr2 = "合肥|翕县|黄山|祁门";
var arr3 = "南昌|九江|赣州|上饶";

var arr00 = "杭州A区|杭州B区";
var arr01 = "宁波A区|宁波B区";
var arr02 = "温州A区|温州B区";
var arr03 = "绍兴A区|绍兴B区";

var arr10 = "南京A区|南京B区";
var arr11 = "苏州A区|苏州B区";
var arr12 = "无锡A区|无锡B区";
var arr13 = "常州A区|常州B区";

var arr20 = "合肥A区|合肥B区";
var arr21 = "翕县A区|翕县B区";
var arr22 = "黄山A区|黄山B区";
var arr23 = "祁门A区|祁门B区";

var arr30 = "南昌A区|南昌B区";
var arr31 = "九江A区|九江B区";
var arr32 = "赣州A区|赣州B区";
var arr33 = "上饶A区|上饶B区";

//alert(eval("arr"+2+1));
function AddOptions(dltObj,arrObj)
{
dltObj.innerHTML="";
var arrLocation=arrObj.split("|");
for(var i=0;i<arrLocation.length;i++){
var opt=document.createElement("OPTION");
dltObj.add(opt);
opt.value=i;
opt.text=arrLocation[i];
}
}
function init(){
AddOptions(dltProvince,eval('arr'));

AddOptions(dltCity,eval('arr'+dltProvince.selectedIndex));
AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));

}
</script>
</head>
<body onLoad="init();">
<table width="300" cellpading="0" cellspacing="0" border="0">
<tr>
<td width="100">
<select id="dltProvince" onchange="AddOptions(dltCity,eval('arr'+dltProvince.selectedIndex));AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));" style="width:100%"></select>
</td>
<td width="100">
<select id="dltCity" onchange="AddOptions(dltArea,eval('arr'+dltProvince.selectedIndex+dltCity.selectedIndex));" style="width:100%">
</select>
</td>
<td width="100">
<select id="dltArea" style="width:100%"></select>
</td>
</tr>
</table>
</body>
</html>

soarcn 2008-04-23

打赏
举报

顺便说一下，楼上的那个代码只是js联动的代码，没有读取数据库的部分内容。注意看仔细了。

soarcn 2008-04-23

打赏
举报

提供个思路：
1、用js，用js的数组变量从数据库读出所有的数据。当然也可以通过jsp的变量把值传递给js的数组变量。总之就是用js来取得级连菜单的数据和对应关系，然后用js的函数实现选择一级菜单的内容时，改变相关级的菜单内容。
2、用jsp。不过需要每次选择完成后，自动提交表单，页面刷新后得到相关级连菜单的内容。
3、用ajax。具体的就不说了，大家应该都清楚了。

基本就这三个思路，例子很好找，我就不放了。拿分来。：）
如果真的还不懂，就传个消息。

hornbilltofy 2008-04-23