级联菜单jquery,级联菜单是什么

怎么实现级联菜单？

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

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都汽车玻璃修复小微创业公司专业提供成都企业网站定制营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

首先要定义一个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就可以看到效果了。

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

用Jquery做一个通用的多级级联菜单，怎么做？

锋利的jquery上 第一章吧 就有个关于树形菜单的简单例子

别懒自己动手下 很快就能实现

怎么用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

我做的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";

}

Jquery实现级联下拉菜单

用combobox的onSelect事件，动态加载

$("#id1").combobox({

onSelect:function(record){

$('#id2').combobox({

 url:''

valueField : 'id',

textField : 'text' });

}

});//id1是你省combobox的id，id2是你市combobox的id