jquery级联菜单,制作级联菜单功能时调用

我做的jquery级联菜单没有效果是怎么回事，js代码有什么问题吗？还有jquery引用的是哪个库

%@page language="java" import="java.util.*"pageEncoding="UTF-8"%

成都创新互联-专业网站定制、快速模板网站建设、高性价比牡丹网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式牡丹网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖牡丹地区。费用合理售后完善，10多年实体公司更值得信赖。

%

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";

}

怎么实现级联菜单？

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

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

怎么用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实现级联下拉菜单

用combobox的onSelect事件，动态加载

$("#id1").combobox({

onSelect:function(record){

$('#id2').combobox({

 url:''

valueField : 'id',

textField : 'text' });

}

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

用jquery的ajax实现二级下拉菜单级联操作，一级的select id=industrial 二级的select id=profession

因为没有足够的信息，我说几个要点，你看看后台是不是这样的：

1.你使用的是 $.getJSON ，这个方法要求你的后台数据 Content-Type 是 text/json 或者 application/json 。如果不是这样的话，肯定不行的

2.回调函数中，myJSON 到底是什么类型，从你的代码来看，它是一个数组，这个数组中的每一个元素都是一个对象，该对象至少有两个属性：professionid 和 professionName .

确认你的数据信息吧，js代码没有什么问题，对了，你是手动触发第一个 select 的 change 事件的，看看你的第一个 select 是不是在触发之前已经有数据了，不然，第一次的触发是没有效果的