本文实例讲述了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程序设计有所帮助。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月29日
2024年11月29日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]