//只需要提供包含數(shù)據(jù)的select標(biāo)簽即可，該select默認(rèn)隱藏，chosen依據(jù)該數(shù)據(jù)構(gòu)建新的html結(jié)構(gòu)
<select name="dept" style="width:150px;" id="dept" class="dept_select" multiple="multiple"> 
<option value="部門1">部門1</option>
<option value="部門2">部門2</option>
<option value="部門3">部門3</option>
</select>
//chosen初始化
$(function(){
$('.dept_select').chosen({
no_results_text:'沒有結(jié)果',
allow_single_deselect:true
});
});

//基于vue解析的html結(jié)構(gòu)
<select data-placeholder="選擇發(fā)件人" class="chosen-select form-control" tabindex="-1" multiple="multiple">
<template v-for='key in zmailTree'>
<option v-for='item in key.userList' value='{{item.id}}'>{{item.name}}</option>
</template>
</select>
//vue實例
var zmailForm=new Vue({
el:'#zmail-form',
ready:function(){
var that=this;
var getToken=$.cookie('dcValidate');
$.ajax({ 
type:'get',
async:false,
url:'后臺數(shù)據(jù)接口地址',
dataType: "json", 
success: function(msg){
that.$set('zmailTree', msg);
}
});
},
data:{
zmailTree:[]
}
});
//通過vue獲取后臺數(shù)據(jù)，將json數(shù)據(jù)賦值給zmailTree這個數(shù)組，它是含有層級結(jié)構(gòu)的，我們不需要輸出層級結(jié)構(gòu)，只需要輸出里面的人員就行了，但是實踐中發(fā)現(xiàn)一個人問題，數(shù)據(jù)解析了，鼠標(biāo)點擊輸入框出現(xiàn)的下拉菜單中并沒有出現(xiàn)我們剛才解析出來的數(shù)據(jù)，我們需要VUE的這個方法Vue.nextTick，延遲回調(diào)chosen初始化代碼：
//延遲初始化chosen
Vue.nextTick(function () {
$('#zmail-select').chosen({
no_results_text: '沒有找到該結(jié)果',// 當(dāng)檢索時沒有找到匹配項時顯示的提示文本
search_contains: true //從任意位置開始檢索
});
});

$('select.chosen-select').on('change', function(){
// 用戶改變了選擇，快快處理
});

//延遲初始化chosen
Vue.nextTick(function () {
$('#zmail-select').chosen({
no_results_text: '沒有找到該結(jié)果',// 當(dāng)檢索時沒有找到匹配項時顯示的提示文本
search_contains: true //從任意位置開始檢索
});
$('#zmail-select').on('change', function(){
//用戶改變了值之后作如下處理
var treeObj = $.fn.zTree.getZTreeObj("zmail-tree");
treeObj.expandAll(true);//展開所有樹節(jié)點
treeObj.checkAllNodes(false);//清空所有樹節(jié)點
$("#zmail-select option:selected").each(function(i,obj){
var node = treeObj.getNodeByParam("id", obj.value, null);
treeObj.checkNode(node, true, true);
});
});
});
//輸入框的值只要發(fā)生了改變我們就獲取樹的目標(biāo)id，展開所有子節(jié)點，并且清空樹的所有選中狀態(tài)，因為輸入框中的值不止一個因此我們要做一個循環(huán)，使用ztree的方法getNodeByParam（根據(jù)給定的參數(shù)查找節(jié)點）和checkNode（控制對應(yīng)節(jié)點的選中或者非選中操作）

//樹的html結(jié)構(gòu),不要忘記寫ztree這個class，否則不顯示數(shù)據(jù)
<ul class="ztree" id="zmail-tree">
</ul>
//樹初始化代碼js
//人員樹基本設(shè)置
var zmailTreeSet={
view:{
dblClickExpand:false
},
async:{
enable:true,
type:'get',
url:'服務(wù)器數(shù)據(jù)地址',
},
data:{
simpleData:{
enable:true,
idKey:'id',
pIdKey:'parentId'
},
key:{
children:'userList'
}
},
check:{
enable:true,
chkboxType:{'Y':'s','N':'s'}
},
callback:{
onCheck:zmailCheck
}
};
function zmailCheck(){
//這里處理輸入框的數(shù)據(jù)
}
//初始化人員樹
$.fn.zTree.init($('#zmail-tree'),zmailTreeSet);

var zmaObj = $.fn.zTree.getZTreeObj(treeId);//getZTreeObj插件方法，獲取目標(biāo)ID
var zmaNodes = zmaObj.getCheckedNodes(true);//getCheckedNodes獲取選中的所有節(jié)點，此處為集合

$("#zmail-select option").each(function(j,obj){
obj.selected='';
});

for(var i = 0;i < zmaNodes.length; i++){
if(typeof(zmaNodes[i].userList) == 'undefined'){//如果該節(jié)點的userList屬性為空說明不是父節(jié)點，存取它的值，如果不為空則跳過
//不寫判斷，直接使用勾選的樹的數(shù)據(jù)的ID來進行選擇，使其屬性select改為selected
$("#zmail-select option[value="+zmaNodes[i].id+"]")[0].selected='selected';
}
}

//循環(huán)外更新select列表
$("#zmail-select").trigger('chosen:updated');