怎么实现级联菜单？

这是百度知道里设置分类的级联菜单，我也想实现一个类似的，请问应该怎么实现？我javaweb的知识懂得不多，所以最好能有一些学习教程。谢谢！... 这是百度知道里设置分类的级联菜单，我也想实现一个类似的，请问应该怎么实现？我java web的知识懂得不多，所以最好能有一些学习教程。谢谢！展开

 我来答

4个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

miaoyueqiang
推荐于2017-09-22 · TA获得超过1121个赞

知道小有建树答主

回答量：168

采纳率：50%

帮助的人：96.4万

我也去答题访问个人页

关注

展开全部

对于一个多条件的查询，我们希望在选择了一个菜单项后，另外一个下拉菜单能够根据我们所选择的第一个菜单项显示其所有子菜单项。这就是本文提到的级联菜单问题。级联菜单实现的方法有很多，本文根据笔者所做的一个小实验，简单的介绍一下如何通过XML来实现级联菜单的功能。

首先要定义一个XML文件，用以存放级联菜单的信息，我们命名为query.xml，其代码如下：
<?xml version="1.0" encoding="gb2312"?>
<info>
<course>
<text>软件工程</text>
<value>1</value>
</course>
<course>
<text>数据结构</text>
<value>2</value>
</course>
<course>
<text>操作系统</text>
<value>3</value>
</course>
<course>
<text>计算机组成原理</text>
<value>4</value>
</course>
<teacher>
<text>张老师</text>
<value>1</value>
</teacher>
<teacher>
<text>李老师</text>
<value>2</value>
</teacher>
<teacher>
<text>刘老师</text>
<value>3</value>
</teacher>
<teacher>
<text>王老师</text>
<value>4</value>
</teacher>
<class>
<text>一班</text>
<value>1</value>
</class>
<class>
<text>二班</text>
<value>2</value>
</class>
<class>
<text>三班</text>
<value>3</value>
</class>
<class>
<text>四班</text>
<value>4</value>
</class>
</info>

然后再创建一个HTML文件，命名为query.html
在query.html里，首先创建一个表单
<form id="queryForm">
<select id="keyword" name="keyword" onChange="showDetail()">
<option value="default">default</option>
<option value="1">课程</option>
<option value="2">教师</option>
<option value="3">班级</option>
</select>
<select id="content" name="content" onChange="showValue()">
<option value="default">default</option>
</select>
</form>
从上面的代码可以看出，当我们选择第一级菜单时，会触发showDetail方法，这是通过JavaScript来实现的，因此我们还需要定义一个showDetail方法，其实现代码如下：
function showDetail(){
var document_xml = new ActiveXObject("Microsoft.XMLDOM");
document_xml.load("query.xml"); //加载info.xml
var RootNode = document_xml.documentElement; //获得info.xml文档的根节点

var keyword = document.getElementByIdx("keyword").value;
var details; //用以存放二级菜单内容，是一个数组对象
var content = document.getElementByIdx("content");
content.options.length = 0;//先清空
if(keyword=="default"){
var option = new Option("default","default");
content.add(option);
}else{
if(keyword=="1"){
details = document_xml.getElementsByTagName_r("course");
}else if(keyword=="2"){
details = document_xml.getElementsByTagName_r("teacher");
}else if(keyword=="3"){
details = document_xml.getElementsByTagName_r("class");
}
for(var i=0;i<details.length;i++){
var xText = details[i].childNodes[0].firstChild.nodeValue; //获取文本
var xValue = details[i].childNodes[1].firstChild.nodeValue; //获取文本以应的值
var option = new Option(xText,xValue);
content.add(option);
}
}
}
从上面的代码可以看出，showDetail方法会根据一级菜单选项的不同显示对应的子菜单。这里涉及到通过JavaScript来读取xml文件的操作，可以参见源码的注释部分，记得结合xml文件里的内容一起看哦。

二级菜单显示出来之后，我们就可以进行选择了，选择之后，会调用showValue方法，把选到的子菜单项的value和text显示出来。showValue的定义如下：
function showValue(){
var content= document.getElementByIdx("content");
var contentText = content.options[content.selectedIndex].text; //获取text值
var contentValue = document.getElementByIdx("content").value; //获取文本
alert(contentValue+" "+contentText);
}
在这个方法里，要注意option当中text值的获取，它与select表单域的value的获取方式不大一样，详见代码及其注释。

把两个方法封装在<head></head>之间，记得要写上<script language="javascript">和</script>了，然后你直接打开query.xml就可以看到效果了。

不知是否对楼主有用，希望对楼主有所帮助。

追问

你这种是下拉框的那种形式，跟我给的图不一样呀

已赞过 已踩过<

评论收起

北京勤哲软件技术

广告2024-12-09

勤哲Excel服务器学习和下载。会Excel，懂管理，就能做食品配送管理系统。软博会金奖产品，适合于各行各业的管理人员使用。

www.qinzhe.com

城里悠悠Bl5c8
推荐于2017-09-07 · TA获得超过2.5万个赞

知道小有建树答主

回答量：1927

采纳率：80%

帮助的人：260万

我也去答题访问个人页

关注

展开全部

代码如下:
<!DOCTYPE html>
<html>
<head>
<title>menu.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="../css/menu.css">
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>

</head>

<body>
<ul>
<li class="menu">
<div class="title">
<span>电脑数码类产品</span>
</div>
<ul class="content">
<li class="optn"><a href="#">笔记本</a>
<ul class="tip">
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本1</a></li>
<li><a href="#">笔记本1</a></li>
</ul>
</li>

<li class="optn"><a href="#">移动硬盘</a>
<ul class="tip">
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘1</a></li>

</ul>
</li>
<li class="optn"><a href="#">电脑软件</a>
<ul class="tip">
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件1</a></li>

</ul>
</li>
<li class="optn"><a href="#">数码产品</a>
<ul class="tip">
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品1</a></li>
</ul>
</li>

</ul>
</li>

</ul>
</body>
</html>

menu.css
代码如下:
@CHARSET "UTF-8";

*{
margin: 0px;
padding: 0px;

}

ul,li{
list-style-type: none;

}

.menu{
width: 190px;
border: 1px red solid;
background-color: #fffdd2;
}

.optn{
width: 190px;
line-height: 28px;
border-top: 1px red dashed;

}

.content{
padding-top:10px;
clear: left;
}

a{
text-decoration: none;
color: #666;
padding: 10px;
}
.optnFocus{
background-color: #fff;
font-weight: bold;

}

div{
padding: 10px;
}

.tip{
width: 190px;
border: 2px red solid;
position: absolute;
background-color: #fff;
display: none;
}

.tip li{
line-height: 23px;
}

接下来就是主要的jquery代码:menu.js
代码如下:
$(function(){

var curY;//获取所选想的TOP
var curH;//获取所选的Height
var curW;//获取所选的width
var objL;//获取当前对象

//自定义函数用于获取当前位置
function setInitValue(obj){
curY=obj.offset().top;
curH=obj.height();
curW=obj.width();
}

//设置当前所选项的鼠标滑动事件
$(".optn").mouseover(function(){
objL=$(this);//获取当前对象
setInitValue(objL);
var allY=curY-curH +"px";

objL.addClass("optnFocus");
//获取气元素下的下一个ul
$(".tip",this).show().css({"top":allY,"left":curW});;

});
$(".optn").mouseout(function(){

$(this).removeClass("optnFocus");
$(".tip",this).hide();

});

//为了防止移到子菜单时子菜单不见，我们也要为子菜单设置鼠标事件

$(".tip").mouseover(function(){

$(this).show();
objL=$(this).prev("li");
setInitValue(objL);
objL.addClass("optnFocus");
});

$(".tip").mouseout(function(){
$(this).hide();
$(this).prev("li").removeClass("optnFocus");

});
});

注意要点：

1.由于用的是较高版本的jquery文件库，所以有些方法是不支持的，例如获取下一个元素的第一个子元素next(erp)，在10.1中是不支持的，所以换了一种方法$(chiled,select),表示在select的范围进行元素的选择

2.整个效果的实现我们还要为子选项框绑定鼠标事件，目的就是为了不在移动到子选项卡中，突然消失。

已赞过 已踩过<

评论收起

陌然浅笑蝉夏
2015-08-23 · 知道合伙人生活技巧行家

陌然浅笑蝉夏
知道合伙人生活技巧行家

采纳数：59 获赞数：4828

向TA提问私信TA

关注

展开全部

　　先在一个不用的sheet里做好下拉菜单内容。然后选中以级联菜单形式输入的单元格或区域，在菜单里找到“数据有效性”，应该是数据菜单，然后“设置”里面的“允许”框里选择“序列”，下面的“来源”框里选定做好的下拉菜单内容，确定。

已赞过 已踩过<

评论收起

百度网友f296ad8
2013-03-27 · TA获得超过142个赞

知道小有建树答主

回答量：347

采纳率：0%

帮助的人：149万

我也去答题访问个人页

关注

展开全部

学学页面上如何使用ajax

追问

ajax基础的我会，就是不会这个，能帮忙解决吗？

追答

本来只有一个选择框，其他都是隐藏或者动态生成的。根据第一个选择栏的结果发出请求，把刷选出的2级菜单显示出来

已赞过 已踩过<

评论收起

1条折叠回答

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

您可能关注的内容

用excel做超市配送管理软件!!

勤哲Excel服务器2024学习和下载。用Excel自动生成超市配送管理软件及手机app.软博会金奖产品，适合于各行各业的管理人员使用。

用Excel做超市配送管理软件，自主设计，勤哲Excel服务器

勤哲Excel服务器软件2024，用Excel自动生成基于web，移动APP和PC的超市配送管理软件。软博会金奖产品，适合于各行各业的管理人员使用。

www.qinzhe.com广告

怎么实现级联菜单？

您可能关注的内容

其他类似问题

为你推荐：