话不多说，直接上代码，此控件适合定做复杂逻辑功能以及动手能力强的人，新手需要慢慢研究
文件依赖等下载地址：https://coss.ee/d/file/www/ztree/
<link href="https://coss.ee/d/file/www/ztree/css/bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="https://coss.ee/d/file/www/ztree/css/zTreeStyle.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="https://coss.ee/d/file/www/ztree/js/bootstrap-3.3.5.min.js"></script> <script type="text/javascript" src="https://coss.ee/d/file/www/ztree/js/jquery.ztree.all-3.5.min.js"></script> <script type="text/javascript" src="https://coss.ee/d/file/www/ztree/js/jquery.ztree.exhide.js"></script>
HTML:
<!-- select用于存放值，后台等获取用 --> <select id="relationTypeId" name="relationTypeId" style="display: none" multiple="multiple"> </select> <div class="form-group form-group-sm" style="position: relative;width: 300px"> <!-- 点击显示按钮 --> <button id="relationBtn" type="button" class="form-control btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="role" title="请选择" style="position: relative;text-align: left;"> <span class="filter-option pull-left pull-left1" style="width: 80%;overflow: hidden;">请选择</span> <span class="caret" style="position: absolute;top: 12px;right: 10px;"></span> </button> <!-- 列表panel --> <div id="relationPanel" class="tree-panel" style="z-index: 9999;display: none;width: 100%;position: absolute;left: 0px;border: 1px solid #d2d6de;border-radius: 4px;background-color: #fff;padding: 10px 5px;"> <!-- ztree列表 --> <ul id="relationTree" class="ztree" style="height:120px;overflow-y:auto;"></ul> </div> </div>
SCRIPT：
//节点中ID唯一，也可理解为是你的select value Id ；pId为父节点Id ，0为根节点
var relationzNodes =[
{name:'全选',id:'1',pId:0,open:true},
{name:'我是子节点1',id:'2',pId:1},
{name:'我是子节点2',id:'3',pId:1},
{name:'我是子节点3',id:'4',pId:1},
{name:'我是子节点4',id:'5',pId:1},
];
// 在这里可以去异步获取值然后赋予 relationzNodes 代码省略
$(document).ready(function(){
//初始化ztree
$.fn.zTree.init($("#relationTree"),{
check: {
enable: true,
chkStyle: "checkbox"
},
data: {
simpleData: {
enable: true,
idKey:"id",
pIdKey:"pId",
rootPId:0
}
},
callback: {
//选中以后执行的方法，此方法除了onCheck还有onClick等 此方法中用于定义自己的业务
onCheck: function(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("relationTree"),
nodes = zTree.getCheckedNodes(true),
v = "",//button 标签显示的内容
relationTypeId="";//用于存放上面隐藏select的值
if(nodes != null){
for(var i=0, l=nodes.length; i<l; i++) {
if(nodes[i].id!="1"){
//拼接选中的内容，name用于显示
v += nodes[i].name + ",";
//由于是多选，给每个option添加selected （注意select的multiple）
relationTypeId+="<option selected value='"+nodes[i].id+"'>"+nodes[i].name+"</option>";
}
}
}
if(v.length > 0) {
v = v.substring(0, v.length-1);
};
$("#relationTypeId").html(relationTypeId);//将选中的值放到select
$('.pull-left1', '#relationBtn').text(v).attr('title', v);将中文（要显示的内容）放到button中显示
if(v == ""){//如果没有选中任何值，显示默认内容
$('.pull-left1', '#relationBtn').text('请选择').attr('title', '请选择');
}
}
}
}, relationzNodes);
//如果是默认选中某值，调用内部的onCheck()方法，用于将值显示在页面
$.fn.zTree.getZTreeObj("relationTree").setting.callback.onCheck();
})
//点击按钮 显示或者关闭列表
$('#relationBtn').on('click', function(){
if($('#relationPanel').is(":visible")){
$('#relationPanel').hide();
}else{
$('#relationPanel').show();
}
});
$(document).click(function(e){
//点击空白其他区域隐藏展开的面板
if( $(e.target).attr('id') != "relationPanel" && $(e.target).parents('#relationPanel').length <= 0 &&
$(e.target).attr('id')!="relationBtn" && $(e.target).parents('#relationBtn').length <= 0 ){
$('#relationPanel').hide();
}
});效果展示：
