本文實例講述了laravel框架select2多選插件初始化默認選中項操作。分享給大家供大家參考，具體如下：
項目中有發(fā)送消息功能，需要能通過搜索，多選用戶，來指定發(fā)送人。使用 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') }}",
//返回的數(shù)據(jù)類型
dataType: "json",
//延遲時間，毫秒
delay: 500,
//是否緩存
cache: true,
//查詢數(shù)據(jù)
data: function (params) {
//params.term就是你搜索輸入的參數(shù)
return {
search: params.term,
page: params.page || 1
};
},
//請求結(jié)果回調(diào)函數(shù)，data就是后端返回的數(shù)據(jù)
processResults: function (data, params) {
var data = data.data;
var results = [];
//循環(huán)數(shù)據(jù)，將數(shù)據(jù)壓入results中
//注意數(shù)據(jù)必須要有二個屬性，id和text，分別對應option的value和文本
//網(wǎng)上有些說無法選中元素，請先檢查這里，你是否設(shè)置了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
});
后端返回的數(shù)據(jù)如下，直接使用 laravel 的 paginate() 方法 返回分頁數(shù)據(jù)。
{
"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
}
}
在編輯消息時，我們需要查看，這條消息發(fā)送給了哪些人，這就需要進入編輯頁面時，讓 select2 默認選中用戶。
網(wǎng)上說通過如下方法可以選中。
$("#spread_select").val([1, 2]).trigger("change");
但是我們這里select2的option是通過ajax動態(tài)加載的，剛進頁面時，select2的ajax根本沒有觸發(fā)，導致select2中沒有option元素，更無法被選中。
我們通過下面的方式，來實現(xiàn)默認選中。
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中的數(shù)據(jù)，可以通過PHP后端生成好后，渲染到頁面，然后通過JSON.parse()解析成JSON對象。
更多關(guān)于Laravel相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《Laravel框架入門與進階教程》、《php優(yōu)秀開發(fā)框架總結(jié)》、《php面向?qū)ο蟪绦蛟O(shè)計入門教程》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》
希望本文所述對大家基于Laravel框架的PHP程序設(shè)計有所幫助。
您可能感興趣的文章:- 關(guān)于laravel后臺模板laravel-admin select框的使用詳解
- laravel-admin select框默認選中的方法
- laravel-admin解決表單select聯(lián)動時,編輯默認沒選上的問題
- 在Laravel中使用DataTables插件的方法
- PHP框架Laravel插件Pagination實現(xiàn)自定義分頁
- 推薦幾款用 Sublime Text 開發(fā) Laravel 所用到的插件
- Laravel框架表單驗證詳解
- Laravel中使用FormRequest進行表單驗證方法及問題匯總
- Laravel 5框架學習之表單
- Laravel實現(xiàn)表單提交
- Laravel 5框架學習之表單驗證
- Laravel 5框架學習之子視圖和表單復用
