本文实例讲述了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",
"from":1,
"last_page":1,
"last_page_url":"http://test.me/member/index",
"next_page_url":"http://test.me/member/index",
"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对象。
更多关于Laravel相关内容感兴趣的读者可查看本站专题:《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。