运用dtree制作的树形下拉列表框

在网上找个树形下拉列表框实在是难，看看dtree觉得其实我们自己是可以做出来的，也花不了多少精力！

下图为我做的下拉列表框：

 

步骤：

1.下载dTree相关文件（dTree.js,dTree.css,images）

2.导入dtee.js及css文件

 s

 （路径按照自己路径为准）

3.编写下拉框div及js：

jsp div代码

关闭

 

相应的js

var srcElement = null; var valueElement = null; function showTree(item,valueId){ srcElement = window.event.srcElement; valueElement = document.getElementById(valueId); var x = getLeft(item); var y = getTop(item) + item.offsetHeight; var w = item.offsetWidth; blockDTree(x,y,w); } function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; } function getLeft(e){ var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; } function blockDTree(x,y,w){ var item = document.getElementById("combdtree"); item.style.display = 'block'; item.style.top = y; item.style.left = x; } function hiddenDTree(){ var item = document.getElementById("combdtree"); if(item){ item.style.display = 'none'; } } function setSrcValue(text,value){ srcElement.value = text; valueElement.value = value; hiddenDTree(); }

 

ok 看看是不是很简单啊！

注：上面div的样式文件

 .dtreecob { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap; display:none; border:1px solid #5CACEE; position: absolute; z-index: 9999; background-color:white; width:200px; } .dBottom{ background-color:#F0F0F0; margin-bottom:0px; text-align:right; height:23px; line-height:23px; } .dBottom a{ margin-right:5px; color:black; text-decoration: none; }