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