//给一级节点添加子子节点
   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("//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("//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>
    &nbsp;&nbsp;
    主分类
    <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>
       &nbsp;&nbsp;
    子分类
    <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>
       &nbsp;&nbsp;
    条  目
    <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部分--------------------->