<----------------HTML部分--------------------->
<style>
.close{
visibility:hidden;
border : 1px solid #008000;
position:absolute;
}
.open{
visibility:visible;
border : 1px solid #008000;
position:absolute;
}
</style>
<script language='JavaScript'>
//—————顯示菜單項 menuId:當前菜單Id—————
function showMenuItem(menuId) {
var node = document.getElementById(menuId);
if(node.hasChildNodes()) {
node.style.visibility='visible';
}
}
//—————隱藏菜單項 menuId:當前菜單Id—————
function hideMenuItem(menuId) {
document.getElementById(menuId).style.visibility='hidden';
}
//—————隱藏菜單項事件方法—————
function hideMenuItemEvent() {
event.srcElement.parentElement.style.visibility='hidden';
}
//—————初始化下拉框—————
function inintSelectMenu() {
//查找一級節點
var resultNodes = findXmlnodes("http://mainClass",resultNodes);
var mainClassNode = document.getElementById("mainClass");
//給一級節點添加子子節點
addChildrenNodes(mainClassNode,resultNodes);
//緩存一級菜單選擇的默認值
var mainClassTxtNode = document.getElementById("mainClassTxt");
var mainClassBtnNode = document.getElementById("mainClassBtn");
mainClassTxtNode.setAttribute("tempId",1);
//設置下拉菜單絕對位置
setDivAbsulotePosition(mainClassNode,mainClassTxtNode);
//設置Btn的絕對位置
//mainClassBtnNode.style.position = "absolute";
//setBtnAbsulotePosition(mainClassBtnNode,mainClassTxtNode);
//一級菜單
mainClassNode.attachEvent(onblur,hideMenuItem);
//二級菜單
var subClassNode = document.getElementById("subClass");
var subClassBtnNode = document.getElementById("subClassBtn");
var subClassTxtNode = document.getElementById("subClassTxt");
setDivAbsulotePosition(subClassNode,subClassTxtNode);
//設置Btn的絕對位置
//subClassBtnNode.style.position = "absolute";
//setBtnAbsulotePosition(subClassBtnNode,subClassTxtNode);
//三級菜單
var itemClassNode = document.getElementById("itemClass");
var itemClassBtnNode = document.getElementById("itemClassBtn");
var itemClassTxtNode = document.getElementById("itemClassTxt");
setDivAbsulotePosition(itemClassNode,itemClassTxtNode);
//設置Btn的絕對位置
//itemClassBtnNode.style.position = "absolute";
//setBtnAbsulotePosition(itemClassBtnNode,itemClassTxtNode);
}
//—————更新下拉菜單—————
function updateSelectMenu() {
//被選擇節點Id
var nodeId = event.srcElement.getAttribute("id");
//被選擇節點文本子節點名
var nodeName = event.srcElement.title != null > 5 ? event.srcElement.title : event.srcElement.childNodes.item(0).nodeValue;
//被選擇節點父節點
var parentNode = event.srcElement.parentElement;
//被選擇節點父節點Id
var parentNodeId = parentNode.getAttribute("id");
//給文本框賦被選擇值
document.getElementById(parentNodeId + "Txt").setAttribute("value",nodeName);
//如果被選擇的是一級菜單，更新二、三級菜單
if(parentNodeId == "mainClass") {
//緩存一級菜單選擇
document.getElementById(parentNodeId + "Txt").setAttribute("tempId",nodeId);
//清空二級菜單列表
document.getElementById("subClassTxt").setAttribute("value","請選擇");
//清空三級菜單列表
document.getElementById("itemClassTxt").setAttribute("value","請選擇");
//移除二級節點
removeChildNodes("subClass");
//移除三級節點
removeChildNodes("itemClass");
//查找二級節點
var resultSubNodes = findXmlnodes("http://mainClass[@id=" + nodeId + "]/subClass",resultSubNodes);
//alert(resultSubNodes.length);
var subNode = document.getElementById("subClass");
//給二級節點添加子子節點
addChildrenNodes(subNode,resultSubNodes);
}
//如果更新的是二級菜單，更新三級菜單
if(parentNodeId == "subClass") {
//獲得一級菜單緩存值
var mainClassId = document.getElementById("mainClassTxt").getAttribute("tempId");
//清空三級菜單列表
document.getElementById("itemClassTxt").setAttribute("value","請選擇");
removeChildNodes("itemClass");
//移除三級節點
removeChildNodes("itemClass");
//查找三級節點
var resultItemNodes = findXmlnodes("http://mainClass[@id=" + mainClassId + "]/subClass[@id=" + nodeId + "]/item",resultItemNodes);
//alert(resultItemNodes.length);
var itemNode = document.getElementById("itemClass");
//給三級節點添加子子節點
addChildrenNodes(itemNode,resultItemNodes);
}
}
//—————添加子節點列表 parentNode： 父節點, childrenNodes: 子節點列表—————
function addChildrenNodes(parentNode,childrenNodes) {
for(i = 0; i < childrenNodes.length; i++) {
//var tempNode = childrenNodes.item(i);
//prompt("tempNode",tempNode.xml);
createNode("div",childrenNodes.item(i).getAttribute("id"),childrenNodes.item(i).getAttribute("name"),parentNode);
//alert(childrenNodes.item(i).getAttribute("name") + " " + childrenNodes.item(i).getAttribute("id"));
}
}
//—————創建子節點，并添加到父節點 type: 節點類型, id：節點Id, txt:文本節點文本值，parentNode： 父節點 —————
function createNode(type,id,txt,parentNode) {
//文本節點
var txtNode = null;
//需創建的子節點
var subNode = null;
//判斷節點類型是否為空，為空直接返回
if(type == null) {
return;
}
//創建節點
subNode = document.createElement(type);
//判斷是否包含文本是否為空，不為空則創建并添加文本子節點
if(txt != null) {
//設置文本節點彈出文字
if(checkSelectMenuItemLength(txt)){
subNode.title = txt;
var txtTemp = txt.substring(0, 5) + "..." ;
//創建文本節點
txtNode = document.createTextNode(txtTemp);
}else {
txtNode = document.createTextNode(txt);
}
//添加文本節點
subNode.appendChild(txtNode);
}
//判斷id是否為空，不為空則添加id屬性
if(id != null) {
subNode.setAttribute('id',id);
}
subNode.attachEvent("onclick",hideMenuItemEvent);
subNode.attachEvent("onclick",updateSelectMenu);
subNode.attachEvent("onmouseover",romanceItem);
subNode.attachEvent("onmouseout",unRomanceItem);
//添加新建子節點到父節點
parentNode.appendChild(subNode);
}
//—————查找數據節點 condition: XPath查詢條件, resultNodes:返回節點集合—————
function findXmlnodes(condition,resultNodes) {
//判斷查詢條件是否為空
if(condition == null) {
return;
}
// 初始化ActiveXObject DOMDocment對象
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
// 設置異步方式
xmlDoc.async=false;
// 加載xml
xmlDoc.load(document.getElementById("mainClassTxt").getAttribute("xmlSrc"));
// 指定查詢語言
xmlDoc.setProperty("SelectionLanguage","XPath");
// 查詢并獲得節點
resultNodes = xmlDoc.documentElement.selectNodes(condition);
//alert(resultNodes.length);
return resultNodes;
}
//—————移除所有子節點 pareantNodeName： 父節點名—————
function removeChildNodes(pareantNodeName) {
var subNodes = document.getElementById(pareantNodeName).childNodes;
var subNodeslength = subNodes.length;
for (i = 0; i < subNodeslength; i++) {
subNodes.item(0).removeNode(true);
}
}
//—————渲染條目背景色—————
function romanceItem() {
event.srcElement.style.backgroundColor="cornflowerblue";
}
//—————反渲染條目背景色—————
function unRomanceItem() {
event.srcElement.style.backgroundColor="#ffffff";
}
//—————檢測條目長度—————
function checkSelectMenuItemLength(txt) {
if(txt.length > 5)
return true;
else
return false;
}
//—————設置層的絕對坐標 setNode：須設置坐標的節點 consultNode：參照節點 —————
function setDivAbsulotePosition(setNode,consultNode) {
setNode.style.top = getPosition(consultNode).y + consultNode.offsetHeight;
setNode.style.left = getPosition(consultNode).x;
setNode.style.width = consultNode.offsetWidth;
}
function setBtnAbsulotePosition(setNode,consultNode) {
setNode.style.top = getPosition(consultNode).y;
setNode.style.left = getPosition(consultNode).x + consultNode.offsetWidth;
}
//—————獲取參照節點的絕對位置 node： 參照節點—————
function getPosition(node){
var left = 0;
var top = 0;
while (node.offsetParent){
left += node.offsetLeft;
top += node.offsetTop;
node = node.offsetParent;
}
left += node.offsetLeft;
top += node.offsetTop;
return {x:left, y:top};
}
</script>
<html>
<body onload="inintSelectMenu();">
<form>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center>
<table>
<tr>
<td>
主分類
<input type='text' id='mainClassTxt' readonly='true' value="請選擇" xmlSrc="selectMenuData.xml">
<input id='mainClassBtn' type='button' value='>>' onclick="showMenuItem('mainClass');hideMenuItem('itemClass');hideMenuItem('subClass');" />
</input>
<div id='mainClass' class="close" >
</div>
</td>
<td>
子分類
<input type='text' id='subClassTxt' readonly='true' value="請選擇" >
<input id='subClassBtn' type='button' value='>>' onclick="showMenuItem('subClass');hideMenuItem('mainClass');hideMenuItem('itemClass');"/>
</input>
<div id='subClass' class="close" >
</div>
</td>
<td>
條 目
<input type='text' id='itemClassTxt' readonly='true' value="請選擇" >
<input id='itemClassBtn' type='button' value='>>' onclick="showMenuItem('itemClass');hideMenuItem('mainClass');hideMenuItem('subClass');" />
</input>
<div id='itemClass' class="close" >
</div>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
<----------------HTML部分--------------------->
<----------------XML部分--------------------->
<classes>
<mainClass id='1' name='book'>
<subClass id='1' name='computer'>
<item id='1' name='think in java'></item>
<item id='2' name='C#'></item>
<item id='3' name='javascript'></item>
</subClass>
<subClass id='2' name='literature'>
<item id='1' name='literaturea'></item>
<item id='2' name='literatureb'></item>
<item id='3' name='literaturec'></item>
</subClass>
<subClass id='3' name='test'>
<item id='1' name='testaaaa'></item>
<item id='2' name='testbbbb'></item>
<item id='3' name='testcccc'></item>
</subClass>
<subClass id='4' name='ssssss'>
<item id='1' name='sssssssaaa'></item>
<item id='2' name='sssssssbbb'></item>
<item id='3' name='sssssssccc'></item>
</subClass>
</mainClass>
<mainClass id='2' name='book2'>
<subClass id='1' name='computer2'>
<item id='1' name='think in java2'></item>
<item id='2' name='C#2'></item>
<item id='3' name='javascript2'></item>
</subClass>
<subClass id='2' name='literature2'>
<item id='1' name='literaturea21'></item>
<item id='2' name='literatureb22'></item>
<item id='3' name='literaturec23'></item>
</subClass>
<subClass id='3' name='test2'>
<item id='1' name='testaaaa21'></item>
<item id='2' name='testbbbb22'></item>
<item id='3' name='testcccc23'></item>
</subClass>
<subClass id='4' name='ssssss2'>
<item id='1' name='sssssssaaa21'></item>
<item id='2' name='sssssssbbb22'></item>
<item id='3' name='sssssssccc23'></item>
</subClass>
</mainClass>
<mainClass id='3' name='book3'>
<subClass id='1' name='computer3'>
<item id='1' name='think in java3'></item>
<item id='2' name='C#3'></item>
<item id='3' name='javascript3'></item>
</subClass>
<subClass id='2' name='literature3'>
<item id='1' name='literaturea31'></item>
<item id='2' name='literatureb32'></item>
<item id='3' name='literaturec33'></item>
</subClass>
<subClass id='3' name='test3'>
<item id='1' name='testaaaa31'></item>
<item id='2' name='testbbbb32'></item>
<item id='3' name='testcccc33'></item>
</subClass>
<subClass id='4' name='ssssss3'>
<item id='1' name='sssssssaaa31'></item>
<item id='2' name='sssssssbbb32'></item>
<item id='3' name='sssssssccc33'></item>
</subClass>
</mainClass>
<mainClass id='4' name='book4'>
<subClass id='1' name='computer4'>
<item id='1' name='think in java4'></item>
<item id='2' name='C#4'></item>
<item id='3' name='javascript4'></item>
</subClass>
<subClass id='2' name='literature4'>
<item id='1' name='literaturea41'></item>
<item id='2' name='literatureb42'></item>
<item id='3' name='literaturec43'></item>
</subClass>
<subClass id='3' name='test4'>
<item id='1' name='testaaaa41'></item>
<item id='2' name='testbbbb42'></item>
<item id='3' name='testcccc43'></item>
</subClass>
<subClass id='4' name='ssssss4'>
<item id='1' name='sssssssaaa41'></item>
<item id='2' name='sssssssbbb42'></item>
<item id='3' name='sssssssccc43'></item>
</subClass>
</mainClass>
</classes>
<----------------XML部分--------------------->