使用select2下拉框ajax載入資料時,編輯賦值的方法
阿新 • • 發佈:2019-01-27
最近在做一個專案,專案地址: 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 });
在頁面載入的時候就載入下拉框資料,在編輯時就能為其賦值,問題解決!