laravel中select2多選，初始化默認選中項

項目中有發送消息功能，須要能經過搜索，多選用戶，來指定發送人。使用 select2 插件來完成。

select2 的 html 代碼以下：

<div class="form-group" id="member_group">
    <label class="col-lg-3 control-label required">選擇用戶
	<span class="required">*</span>
    </label>
    <div class="col-lg-4">
	<select class="form-control" name="user_id[]" id="member_select" multiple="multiple"></select>
    </div>
</div>

select2 的 js 代碼以下：

//選擇用戶
$("#member_select").select2({
    ajax: {
        //請求的URL
        url: "{{ route('member.index') }}",
        //返回的數據類型
        dataType: "json",
        //延遲時間，毫秒
        delay: 500,
        //是否緩存
        cache: true,
        //查詢數據
        data: function (params) {
            //params.term就是你搜索輸入的參數
            return {
                search: params.term,
                page: params.page || 1
            };
        },
        //請求結果回調函數，data就是後端返回的數據
        processResults: function (data, params) {
            var data = data.data;
            var results = [];

            //循環數據，將數據壓入results中
            //注意數據必需要有二個屬性，id和text，分別對應option的value和文本
            //網上有些說沒法選中元素，請先檢查這裏，你是否設置了id，而且不爲空
            $(data.data).each(function (i, obj) {
                results.push({
                    id: obj.id,
                    text: obj.name
                });
            });
            
            return {
                results: results,
                pagination: {
                    more: (data.current_page * data.per_page) < data.total
                }
            };
        }
    },
    placeholder: '選擇用戶',
    //是否多選
    multiple: true,
    allowClear: true
});

後端返回的數據以下，直接使用 laravel 的 paginate() 方法 返回分頁數據。

{
    "status_code":200,
    "message":"查詢成功",
    "data":{
        "current_page":1,
        "data":[
            {
                "id":2006,
                "name":"用戶1"
            },
            {
                "id":2005,
                "name":"用戶3"
            },
            {
                "id":2004,
                "name":"用戶3"
            }
        ],
        "first_page_url":"http://test.me/member/index?page=1",
        "from":1,
        "last_page":1,
        "last_page_url":"http://test.me/member/index?page=1",
        "next_page_url":"http://test.me/member/index?page=1",
        "path":"http://test.me/member/index",
        "per_page":1,
        "prev_page_url":null,
        "to":null,
        "total":3
    }
}

在編輯消息時，咱們須要查看，這條消息發送給了哪些人，這就須要進入編輯頁面時，讓 select2 默認選中用戶。

網上說經過以下方法能夠選中。

$("#spread_select").val([1, 2]).trigger("change");

可是咱們這裏select2的option是經過ajax動態加載的，剛進頁面時，select2的ajax根本沒有觸發，致使select2中沒有option元素，更沒法被選中。

咱們經過下面的方式，來實現默認選中。

var selObj = [
    {"id": 1, "name": "小徐"},
    {"id": 2, "name": "小張"},
    {"id": 3, "name": "小明"},
];

(function initSel(selObj) {
    if (selObj) {
        for (var ix = 0; ix < selObj.length; ix++) {
            var item = selObj[ix];
            var option = new Option(item.name, item.id, true, true);
            $("#member_select").append(option);
        }
        $("#member_select").trigger('change');
    }
})(selObj);

selObj中的數據，能夠經過PHP後端生成好後，渲染到頁面，而後經過JSON.parse()解析成JSON對象。