之前随便写写，发现需要的人挺多，抽了点时间写了个完整的已上次到资源。
首先感谢的作者。控件原理就请到原文去看了。
网上找了一下。etx也有类似的控件，无奈它的类库实在是不小，，就自己封装了一个。
HTML代码
<head>
<!–jquery jsTree控件–>
<link rel="stylesheet" type="text/css" href="${ctx}/js/jstree/tree_component.css" /><script type="text/javascript" src="${ctx}/js/jstree/css.js"></script><script type="text/javascript" src="${ctx}/js/jstree/tree_component.min.js"></script>
<script src="${ctx}/js/jquery.js"type="text/javascript"></script>
<script type="text/javascript">jQuery(document).ready(function(){
initSelect("departmentId","terminal-planning!loadTree.action");// 这里后面一个url是jstree 获得json的后台。
}
//用DIV模拟出树形selectfunction Offset(e) { //取标签的绝对位置 var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth; var h = e.offsetHeight-2; while(e=e.offsetParent) { t+=e.offsetTop; l+=e.offsetLeft; } return { top : t, left : l, width : w, height : h } } function initSelect(obj,url){//取得select标签的位置。obj:页面上被替代的select id.url：jsTree 获得json后台var $selectObj = $("#"+obj);var offset=Offset($selectObj.get(0)); //取得Select所在的位置 $selectObj.css("display","none");//隐藏原来的selectvar $iDiv = $("<div></div>");//模拟一个div替代select$iDiv.css("position","absolute");$iDiv.css("top",offset.top+"px");$iDiv.css("left",offset.left+"px");$iDiv.css("width",offset.width+"px");$iDiv.css("height",offset.height+"px");$iDiv.css("background","url(images/icon_select.gif) no-repeat right 4px");$iDiv.css("border","1px solid #3366ff");$iDiv.css("fontSize","12px");$iDiv.css("lineHeight",offset.height+"px");$iDiv.css("textIndent","4px");$("body").append($iDiv);//鼠标事件$iDiv.get(0).onmouseover=function(){//鼠标移到 $iDiv.css("background","url(images/icon_select_focus.gif) no-repeat right 4px");}$iDiv.get(0).onmouseout=function(){//鼠标移走 $iDiv.css("background","url(images/icon_select.gif) no-repeat right 4px");}$iDiv.click(function(){if($("#selectchild"+obj).length==1){//判断是否创建过弹出层divif(($("#selectchild"+obj+":hidden").length==1)){//打开$("#selectchild"+obj).css("display","block");}else{//隐藏$("#selectchild"+obj).css("display","none");}}else{//初始一个div放在上一个div下边，当options的替身。var $cDiv = $("<div></div>");$cDiv.css("position","absolute");$cDiv.css("top",offset.top+offset.height+2+"px");$cDiv.css("left",offset.left+"px");$cDiv.css("width",offset.width+"px");$cDiv.css("background","#f7f7f7");$cDiv.css("border","1px solid silver");$deptDiv = $("<div></div>")//生成jsTreeconf={data:{type:"json", url:url},callback:{ onchange : function(node) { $iDiv.text($("#"+node.id+">a:eq(0)").text());//将选中的ID写进原来的select$Option = $("<option value="+node.id+"selected=’true’></option>");$("#"+obj).append($Option);$cDiv.css("display","none");}}};var treeFunc = $.tree_create();treeFunc.init($deptDiv, $.extend({},conf));$cDiv.append($deptDiv);$("body").append($cDiv);}})}
</script></head><body>
那么，不如我们礼貌地保持相对距离，不至于太冷，不至于太痛。
