正文
级联菜单jquery,级联菜单是什么
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
怎么实现级联菜单？
对于一个多条件的查询，我们希望在选择了一个菜单项后，另外一个下拉菜单能够根据我们所选择的第一个菜单项显示其所有子菜单项。这就是本文提到的级联菜单问题。级联菜单实现的方法有很多，本文根据笔者所做的一个小实验，简单的介绍一下如何通过XML来实现级联菜单的功能。
首先要定义一个XML文件，用以存放级联菜单的信息，我们命名为query.xml，其代码如下：
?xml version="1.0" encoding="gb2312"?
info
course
text软件工程/text
value1/value
/course
course
text数据结构/text
value2/value
/course
course
text操作系统/text
value3/value
/course
course
text计算机组成原理/text
value4/value
/course
teacher
text张老师/text
value1/value
/teacher
teacher
text李老师/text
value2/value
/teacher
teacher
text刘老师/text
value3/value
/teacher
teacher
text王老师/text
value4/value
/teacher
class
text一班/text
value1/value
/class
class
text二班/text
value2/value
/class
class
text三班/text
value3/value
/class
class
text四班/text
value4/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;idetails.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就可以看到效果了。
不知是否对楼主有用，希望对楼主有所帮助。
相关问答
Q1: 用Jquery做一个通用的多级级联菜单，怎么做？
锋利的jquery上 第一章吧 就有个关于树形菜单的简单例子
别懒自己动手下 很快就能实现
Q2: 怎么用jquery写级联菜单
帮你的写了个，看看是这是你想要的。（直接复制保存为htm文件即可运行）
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlePop menu/title
script src=""/script
style
li
#menu
#sub_menu
/style
/head
body
input type="button" value="show Menu" onclick="getMenu();" style="cursor:default; "
/body
script
//
var countries = new Array('中国(China)', '美国(USA)');
var citys = new Array(['广州', '深圳', '重庆', '北京', '天津', '上海', '青岛'], ['Washington D.C', 'Seattle', 'Chicago', 'San Francisco']);
function getMenu(){
var main_menu = "ol style='list-style:none;' id='main_menu'";
for(var i = 0; i countries.length; i++){
main_menu += "li id='l_" + i + "'" + countries[i] + "li";
}
main_menu += "/ol";
$("body").append('div id="menu"' + main_menu + '/div');
$("#menu").slideDown("slow");
$("#main_menu li").bind("mouseover", function(){
$("#sub_menu").remove();
$(this).css("background","#CCC");
var sub_menu = "ol style='list-style:none;'";
var index = $(this).attr("id").substr($(this).attr("id").indexOf("_") + 1);
for(var i = 0; i citys[index].length; i++){
sub_menu += "li" + citys[index][i] + "/li";
}
sub_menu += "/ol";
$("body").append("div id='sub_menu'" + sub_menu + "/div");
var offset = $(this).offset();
$("#sub_menu").css().slideDown("slow");
$("#sub_menu ol li").bind("click", function(){
alert($(this).text());
$("#sub_menu").remove();
}).bind("mouseover", function(){
$(this).css("background","#CCC");
}).bind("mouseout", function(){
$(this).css("background","#EBEBEB");
});
}).bind("mouseout", function(){
$(this).css("background","#EBEBEB");
});
}
/script
/html
Q3: 我做的jquery级联菜单没有效果是怎么回事，js代码有什么问题吗？还有jquery引用的是哪个库
%@page language="java" import="java.util.*"pageEncoding="UTF-8"%
%
Stringpath = request.getContextPath();
StringbasePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%
!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
basehref="%=basePath%"
titleMy JSP 'show.jsp' startingpage/title
meta http-equiv="pragma"content="no-cache"
meta http-equiv="cache-control"content="no-cache"
meta http-equiv="expires"content="0"
meta http-equiv="keywords"content="keyword1,keyword2,keyword3"
meta http-equiv="description" content="This is mypage"
!--
link rel="stylesheet" type="text/css"href="styles.css"
--
scripttype="text/javascript"
var proList = ${array};
function loadCollege(){
得到json对象的长度，
var length=proList.length;
for(var i=0;ilength;i++){
遍历每一个元素得到学院放在id为collegeSelect的下拉列表框中
document.getElementById("collegeSelect").options.add(newOption(proList[i].name,proList[i].id));
}
}
function loadClass(obj){
如果没有这句话，它会把所有的班级放在所有的学院下面
document.getElementById("clxSelect").options.length=0;
var id=obj.value;
var length=proList.length;
for(var i=0;ilength;i++){
if(proList[i].id==id){
var clxList=proList[i].clxes;
var clxLength = clxList.length;
for(var j = 0; j clxLength; j++){
document.getElementById("clxSelect").options.add(newOption(clxList[j].name,clxList[j].id));
}
break;
}
}
}
/script
/head
调用遍历学院的方法
body onLoad="loadCollege()"
学院： 调用遍历班级的方法
select id="collegeSelect" onchange="loadClass(this)"
/select
br
班级：
select id="clxSelect"
/select
/body
/html
action中的代码
publicString selectJson1(){
//在数据库用级联查询查学院，在action中得到查出的集合
ListYards l=service.selectYards();
//调用JSONArray.fromObject（）；方法得到json对象
this.array=JSONArray.fromObject(l);
return "show";
}
Q4: Jquery实现级联下拉菜单
用combobox的onSelect事件，动态加载
$("#id1").combobox({
onSelect:function(record){
$('#id2').combobox({
url:''
valueField : 'id',
textField : 'text' });
}
});//id1是你省combobox的id，id2是你市combobox的id
