怎么实现级联菜单？
这是百度知道里设置分类的级联菜单，我也想实现一个类似的，请问应该怎么实现？我javaweb的知识懂得不多，所以最好能有一些学习教程。谢谢！...
这是百度知道里设置分类的级联菜单，我也想实现一个类似的，请问应该怎么实现？我java web的知识懂得不多，所以最好能有一些学习教程。谢谢！
展开
展开全部
对于一个多条件的查询，我们希望在选择了一个菜单项后，另外一个下拉菜单能够根据我们所选择的第一个菜单项显示其所有子菜单项。这就是本文提到的级联菜单问题。级联菜单实现的方法有很多，本文根据笔者所做的一个小实验，简单的介绍一下如何通过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就可以看到效果了。
不知是否对楼主有用，希望对楼主有所帮助。
首先要定义一个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就可以看到效果了。
不知是否对楼主有用，希望对楼主有所帮助。
追问
你这种是下拉框的那种形式，跟我给的图不一样呀
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
TableDI
2024-07-18 广告
`VLOOKUP` 函数是 Excel 中一个常用的函数，用于在表格或区域中查找值，并返回该值所在行中指定列的对应值。当需要匹配两个表格的相同数据时，可以利用 `VLOOKUP` 来实现。具体来说，首先确保两个表格中有一个共同的列（例如ID...
点击进入详情页
本回答由TableDI提供
展开全部
代码如下:
<!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.整个效果的实现我们还要为子选项框绑定鼠标事件，目的就是为了不在移动到子选项卡中，突然消失。
<!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.整个效果的实现我们还要为子选项框绑定鼠标事件，目的就是为了不在移动到子选项卡中，突然消失。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
先在一个不用的sheet里做好下拉菜单内容。然后选中以级联菜单形式输入的单元格或区域，在菜单里找到“数据有效性”，应该是数据菜单，然后“设置”里面的“允许”框里选择“序列”，下面的“来源”框里选定做好的下拉菜单内容，确定。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
学学页面上如何使用ajax
追问
ajax基础的我会，就是不会这个，能帮忙解决吗？
追答
本来只有一个选择框，其他都是隐藏或者动态生成的。根据第一个选择栏的结果发出请求，把刷选出的2级菜单显示出来
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
