版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30152271/article/details/51372867
引入需要的文件:
<script src="${ctxStatic}/js/select2/select2.js" type="text/javascript"></script>
<script src="${ctxStatic}/js/select2/select2_locale_zh-CN.js" type="text/javascript"></script>
<link href="${ctxStatic}/js/select2/select2.css" type="text/css" rel="stylesheet" />
方法一:
页面元素:
<select id="confButtons" name="confButtons" multiple="multiple" class="js-example-basic-multiple"></select>
js代码:
$.ajax({
url: ctxAdmin + '/act/node/buttonSelect2',
type: 'post',
data: {
sign: (firstNode == 'true' ? irst':'Normal'),
processDefinitionKey:processDefinitionKey},
dataType: 'json',
success: function (data) {
$.each(data['rows'],function(i,row){
$("#confButtons").append('<option value="'+row['id']+'">'+row['text']+'</option>');
});
$.each(buttons.split(","),function(i,button){ //buttons是传进来的参数,是默认选中的选项的value,多个value由逗号分隔的字符串
$("#confButtons").find("option[value='"+button+"']").prop("selected","true");
});
$("#confButtons").select2();
}
});
方法二:
页面元素:
//value不可省略
<input id="confButtons" name="confButtons" type="text" class="input-xlarge" value=" "/>
js代码:
var $select=$("#confButtons");
var array=[];
$select.select2({
multiple:true,
allowClear: true,
minimumResultsForSearch: Infinity,
closeOnSelect: false, //选择一项后不自动关闭下拉框
ajax: {
url: ctxAdmin + '/act/node/buttonSelect2',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
sign:(firstNode == 'true' ? 'First':'Normal'),
processDefinitionKey:processDefinitionKey
};
},
results: function (data,params) {
params.page = params.page || 1;
return {
results: data['rows'],
pagination: {
more: (params.page * 30) < data['total']
}
};
},
cache:true
},
initSelection: function (element,callback) {
$.each(buttons.split(","),function(i,button){
array[i]={
text:button,
id:button
}
});
if(buttons){
callback(array); //初始化选中的选项
}
}
});
设置了初始值后的效果如下: