下拉树图示：

?
?主要实现部分：

第一，freemarker页面显示部分

	<input type="hidden" name="comboxId" id="comboxId">
	<div style="position:relative;float:left;">
	<div id="combo" onclick="showComboxTree(this, 'comboxTree')" style="width:200px;height:16px;" >
	    <div id="downICON" align="center"><img src="${path}/images/combo.gif" /></div>
		<div id="displyContent">${displayName}</div>				
	</div>
	
	<ul id="comboxTree" class="tree" style="display:none;overflow:auto;background-color:#f5f5f5;border :1px solid Silver;position:absolute;z-index:5;"></ul>
	
	</div>

?外层div的position要设置为relative,里层的<ul>要设置position:absolute;z-index:5，z-index设置为一个大于0的值就可以。这样显示ul对象的时候才会叠在其他层的上面，而不会把下面的层挤走。这部分熟悉div布局的读者应该会比较清楚。

显示树的组件比较多，如dtree,zTree之类的，在这不作介绍，本人使用的是zTree,zTree是jquery的一个插件，可以实现异步加载,不用一下子将整个树加载进来。

第二，js方法 showComboxTree，如下：

function showComboxTree(obj, treeName){
			if (document.getElementById(treeName).style.display == 'none') {			
				var objTop = obj.offsetTop;
				var objLeft = obj.offsetLeft;
				var treeTop = objTop + parseInt(obj.style.height);
				var treeLeft = objLeft;
				document.getElementById(treeName).style.top = treeTop+parseInt(2.5);;
				document.getElementById(treeName).style.left = treeLeft;
				document.getElementById(treeName).style.display = 'block';
				document.getElementById(treeName).style.width = obj.style.width;
				document.getElementById(treeName).style.height = '150'; //控制高度
			}else{
				document.getElementById(treeName).style.display = 'none';
			}
		}

?comboxTree.ftl完整代码如下：

<#assign path="${request.getContextPath()}">
<link rel="stylesheet" href="${path}/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${path}/ztree/jquery-1.4.2.js"></script>
<script type="text/javascript" src="${path}/ztree/jquery-ztree-2.3.min.js"></script> 
	<style>
		#combo{
			cursor:hand;
			border:1px solid #949DA4;
		}
		#displyContent{
			float:center;
			
		}
		#downICON{
			float:right;
			width:15px;
		}
	</style>
	<script language="javascript">
		function showComboxTree(obj, treeName){
			if (document.getElementById(treeName).style.display == 'none') {			
				var objTop = obj.offsetTop;
				var objLeft = obj.offsetLeft;
				var treeTop = objTop + parseInt(obj.style.height);
				var treeLeft = objLeft;
				document.getElementById(treeName).style.top = treeTop+parseInt(2.5);;
				document.getElementById(treeName).style.left = treeLeft;
				document.getElementById(treeName).style.display = 'block';
				document.getElementById(treeName).style.width = obj.style.width;
				document.getElementById(treeName).style.height = '150'; //控制高度
			}else{
				document.getElementById(treeName).style.display = 'none';
			}
		}
	</script>
	<input type="hidden" name="comboxId" id="comboxId">
	<div style="position:relative;float:left;">
	<div id="combo" onclick="showComboxTree(this, 'comboxTree')" style="width:200px;height:16px;" >
	    <div id="downICON" align="center"><img src="${path}/images/combo.gif" /></div>
		<div id="displyContent">${displayName}</div>				
	</div>
	
	<ul id="comboxTree" class="tree" style="display:none;overflow:auto;background-color:#f5f5f5;border :1px solid Silver;position:absolute;z-index:5;"></ul>
	
	</div>
	<SCRIPT LANGUAGE="JavaScript">
  <!--
	var zTree1;
	var setting;
		setting = {
			checkable: false,
			async: true,
			asyncUrl: "${path}${treepath}",  //获取节点数据的URL地址
			asyncParam: ["isRoot", "id"],  //获取节点数据时，必须的数据名称，例如：id、name
			callback:{
				asyncSuccess: zTreeOnAsyncSuccess,
				asyncError: zTreeOnAsyncError,
				click: zTreeOnClick
			},
			expandSpeed:"