javaScript + DHtml + Css 自己实现select (原创)

<----------------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("//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("//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>
      
    主分类
    <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部分--------------------->

posted on 2007-06-27 09:51 hhcto 阅读(1115) 评论(1) 编辑收藏所属分类: JavaScript

Comments

# re: javaScript + DHtml + Css 自己实现select (原创)

dreamstone

写的不错啊

Posted @ 2007-08-12 17:25 回复更多评论

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: javascript图片浏览器的核心—图片预加载(转) 模式窗口showModalDialog详解 (转载) javaScript + DHtml + Css 自己实现select (原创) Javascript attachEvent传递参数的办法（转载）

导航

统计

常用链接

留言簿(1)

随笔分类

随笔档案

文章分类

文章档案

Ajax之Lightbox

搜索

最新评论

阅读排行榜

评论排行榜

javaScript + DHtml + Css 自己实现select (原创)