laravel框架select2多选插件初始化默认选中项操作示例

2023-08-01 02:45:03 303

//选择用户 $("#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;ix
selObj中的数据，可以通过PHP后端生成好后，渲染到页面，然后通过JSON.parse()解析成JSON对象。
更多关于Laravel相关内容感兴趣的读者可查看本站专题：《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

laravel框架select2多选插件初始化默认选中项操作示例

热门推荐

随机推荐