#CSS
<style>
.select2-results__option[aria-selected=true] {
display: false;
}
li[aria-selected=true] {
display: none !important;
}
</style>
#Html
<section id="tags" class="row">
<div class="col-md-4"><p>
<select id= "userlist" class="js-data-example-ajax form-control" multiple="multiple">
</select>
</p>
</div>
</section>
#JavaScript
<script>
var addUser2List=function(usrlist){
$("#userlist").select2({
tags: true,
multiple: true,
data: usrlist
});
}
addUser2List([{id:"val_kk",text:"txt_kk",selected:true}]) //添加历史选择项
$(function () {
$("#userlist").select2({
ajax: {
url: "/bhuser/getnickName_Email",
dataType: 'json',
delay: 250,
data: function (params) {//ajax url parameters
return {
nickname: params.term, // set url parameter nickname=params.term
page: params.page
};
},
processResults: function (data) {
return {
results: data.items
};
},
cache: true
},
escapeMarkup: function (markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelect // omitted for brevity, see the source of this page
});
});
function formatRepo (repo) { //从后台读取到数据项在下拉菜单中的显示名称,直接返回text字段
if (repo.loading)
return repo.text;
return repo.text;
}
function formatRepoSelect (repo) { //新选择时,会把所有已选的项进行设置。
if (repo.loading)
return repo.text;
repo.selected = true; //这里设置为true,可以区分是第一次进入还是后续进入
return repo.text;
}
$("#userlist").on("select2:unselect",function(e){ //去除时回调
var reslist=$("#userlist").val();
console.log("select2:unselect", e.params.data.id);
});
</script>