select2的使用（Version: 3.5.4）

引入需要的文件：

<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);   //初始化选中的选项                    }                }            });

点击了解更多

设置了初始值后的效果如下：