1. 程式人生 > >使用select2下拉框ajax載入資料時,編輯賦值的方法

使用select2下拉框ajax載入資料時,編輯賦值的方法

最近在做一個專案,專案地址: https://github.com/wangyuanjun008/wyj-parent.git
使用bootstrap select2下拉框外掛,ajax從後臺載入資料,儲存編輯後,不知道怎麼為下拉框賦值,下拉框程式碼如下:

<label class="col-sm-1 control-label">使用狀態:</label>
<select id="sel_status" name="status" class="col-sm-3 form-control select2"></select>

$("#sel_status").select2({
    placeholder : "--請選擇--",
    dropdownParent : $("#myModal"),
    allowClear : true,
    width : 150,
    ajax : {
        url : '${ctx}/dataDict/getData?groupCode='+'yesOrNo',
        dataType : 'json',
        type : 'get',
        data: function (params) {
            return {
                q: params.term, // search term 請求引數
                page: params.page
            };
        },
        processResults: function (data, params) {
            params.page = params.page || 1;
            return {
                results: data,//itemList
                pagination: {
                    more: (params.page * 30) < data.total_count
                }
            };
        },
        cache: true
    }
 });

通過查詢api知道,在select4.0之後可以使用 $(“select”).val(“id”).trigger(“change”);為下拉框賦值
你會發現下拉框中的資料是點選之後才會載入資料的,使用如上方法 ‘id’是未知的,原因是在編輯的時候下拉框的資料還沒有加載出來

解決方法如下:

function getDataByGroupCode(groupCode){
    var dataStore;
    $.ajax({
        dataType : 'json',
        type : 'get',
        url : model.dataURL+groupCode,
        async : false,
        success: function(data){
            dataStore=data;
        }
     });
    return dataStore;
}   
var dataStore = getDataByGroupCode('yesOrNo');

$("#sel_status").select2({
    placeholder : "--請選擇--",
    dropdownParent : $("#myModal"),
    allowClear : true,
    width : 150,
    minimumResultsForSearch: -1,
    data : dataStore
});

在頁面載入的時候就載入下拉框資料,在編輯時就能為其賦值,問題解決!