對(duì)于一個(gè)多條件的查詢，我們希望在選擇了一個(gè)菜單項(xiàng)后，另外一個(gè)下拉菜單能夠根據(jù)我們所選擇的第一個(gè)菜單項(xiàng)顯示其所有子菜單項(xiàng)。這就是本文提到的級(jí)聯(lián)菜單問題。級(jí)聯(lián)菜單實(shí)現(xiàn)的方法有很多，本文根據(jù)筆者所做的一個(gè)小實(shí)驗(yàn)，簡單的介紹一下如何通過XML來實(shí)現(xiàn)級(jí)聯(lián)菜單的功能。
堅(jiān)守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都汽車玻璃修復(fù)小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網(wǎng)站定制營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。
首先要定義一個(gè)XML文件，用以存放級(jí)聯(lián)菜單的信息，我們命名為query.xml，其代碼如下：
?xml version="1.0" encoding="gb2312"?
info
course
text軟件工程/text
value1/value
/course
course
text數(shù)據(jù)結(jié)構(gòu)/text
value2/value
/course
course
text操作系統(tǒng)/text
value3/value
/course
course
text計(jì)算機(jī)組成原理/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
然后再創(chuàng)建一個(gè)HTML文件，命名為query.html
在query.html里，首先創(chuàng)建一個(gè)表單
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"班級(jí)/option
/select
select id="content" name="content" onChange="showValue()"
option value="default"default/option
/select
/form
從上面的代碼可以看出，當(dāng)我們選擇第一級(jí)菜單時(shí)，會(huì)觸發(fā)showDetail方法，這是通過JavaScript來實(shí)現(xiàn)的，因此我們還需要定義一個(gè)showDetail方法，其實(shí)現(xiàn)代碼如下：
function showDetail(){
var document_xml = new ActiveXObject("Microsoft.XMLDOM");
document_xml.load("query.xml"); //加載info.xml
var RootNode = document_xml.documentElement; //獲得info.xml文檔的根節(jié)點(diǎn)
var keyword = document.getElementByIdx("keyword").value;
var details; //用以存放二級(jí)菜單內(nèi)容，是一個(gè)數(shù)組對(duì)象
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; //獲取文本以應(yīng)的值
var option = new Option(xText,xValue);
content.add(option);
}
}
}
從上面的代碼可以看出，showDetail方法會(huì)根據(jù)一級(jí)菜單選項(xiàng)的不同顯示對(duì)應(yīng)的子菜單。這里涉及到通過JavaScript來讀取xml文件的操作，可以參見源碼的注釋部分，記得結(jié)合xml文件里的內(nèi)容一起看哦。
二級(jí)菜單顯示出來之后，我們就可以進(jìn)行選擇了，選擇之后，會(huì)調(diào)用showValue方法，把選到的子菜單項(xiàng)的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);
}
在這個(gè)方法里，要注意option當(dāng)中text值的獲取，它與select表單域的value的獲取方式不大一樣，詳見代碼及其注釋。
把兩個(gè)方法封裝在head/head之間，記得要寫上script language="javascript"和/script了，然后你直接打開query.xml就可以看到效果了。
不知是否對(duì)樓主有用，希望對(duì)樓主有所幫助。
鋒利的jquery上 第一章吧 就有個(gè)關(guān)于樹形菜單的簡單例子
別懶自己動(dòng)手下 很快就能實(shí)現(xiàn)
幫你的寫了個(gè)，看看是這是你想要的。（直接復(fù)制保存為htm文件即可運(yùn)行）
!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
%@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(){
得到j(luò)son對(duì)象的長度，
var length=proList.length;
for(var i=0;ilength;i++){
遍歷每一個(gè)元素得到學(xué)院放在id為collegeSelect的下拉列表框中
document.getElementById("collegeSelect").options.add(newOption(proList[i].name,proList[i].id));
}
}
function loadClass(obj){
如果沒有這句話，它會(huì)把所有的班級(jí)放在所有的學(xué)院下面
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
調(diào)用遍歷學(xué)院的方法
body onLoad="loadCollege()"
學(xué)院： 調(diào)用遍歷班級(jí)的方法
select id="collegeSelect" onchange="loadClass(this)"
/select
br
班級(jí)：
select id="clxSelect"
/select
/body
/html
action中的代碼
publicString selectJson1(){
//在數(shù)據(jù)庫用級(jí)聯(lián)查詢查學(xué)院，在action中得到查出的集合
ListYards l=service.selectYards();
//調(diào)用JSONArray.fromObject（）；方法得到j(luò)son對(duì)象
this.array=JSONArray.fromObject(l);
return "show";
}
用combobox的onSelect事件，動(dòng)態(tài)加載
$("#id1").combobox({
onSelect:function(record){
$('#id2').combobox({
?url:''
valueField?:?'id',
textField?:?'text' });
}
});//id1是你省combobox的id，id2是你市combobox的id
重慶分公司
重慶分公司
