jquery实现多级菜单类型 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 层次选择器

$("div span") 选取div里的所有span元素

$("div span") 选取div元素下元素名是span的子元素

$("#one +div") 选取id为one的元素的下一个div同辈元素等同于$(#one).next("div")

$("#one~div") 选取id为one的元素的元素后面的所有div同辈元素等同于$(#one).nextAll("div")

$(#one).siblings("div") 获取id为one的元素的所有div同辈元素（不管前后）

$(#one).prev("div") 获取id为one的元素的前面紧邻的同辈div元素

所以获取元素范围大小顺序依次为：

$(#one).siblings("div")$("#one~div")$("#one +div") 或是

$(#one).siblings("div")$(#one).nextAll("div")$(#one).next("div")

不积跬步,无以至千里!

Q2: JQuery实现多级tab切换

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleDocument/title

script src="jquery-3.3.1.js"/script

style

.Tab{

}

.Tab span{

margin-right:10px;

cursor:pointer;

}

/style

/head

body

div class="Tab"

spanA1/span

spanB2/span

spanC3/span

/div

div style="display: none" class="tab1"

div

AA1