laravel框架select2多选插件初始化默认选中项操作示例
本文实例讲述了laravel框架select2多选插件初始化默认选中项操作。分享给大家供大家参考,具体如下:
项目中有发送消息功能,需要能通过搜索,多选用户,来指定发送人。使用select2插件来完成。
select2的html代码如下:
选择用户 *
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){ vardata=data.data; varresults=[]; //循环数据,将数据压入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)后端返回的数据如下,直接使用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?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 } }在编辑消息时,我们需要查看,这条消息发送给了哪些人,这就需要进入编辑页面时,让select2默认选中用户。
网上说通过如下方法可以选中。
$("#spread_select").val([1,2]).trigger("change");但是我们这里select2的option是通过ajax动态加载的,刚进页面时,select2的ajax根本没有触发,导致select2中没有option元素,更无法被选中。
我们通过下面的方式,来实现默认选中。
varselObj=[ {"id":1,"name":"小徐"}, {"id":2,"name":"小张"}, {"id":3,"name":"小明"}, ]; (functioninitSel(selObj){ if(selObj){ for(varix=0;ixselObj中的数据,可以通过PHP后端生成好后,渲染到页面,然后通过JSON.parse()解析成JSON对象。
更多关于Laravel相关内容感兴趣的读者可查看本站专题:《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。