laravel中select2多选，初始化默认选中项

概述项目中有发送消息功能，需要能通过搜索，多选用户，来指定发送人。使用 select2 插件来完成。 select2 的 html 代码如下： select2 的 js 代码如下： 后端返回的数据如下，直

项目中有发送消息功能，需要能通过搜索，多选用户，来指定发送人。使用 select2 插件来完成。

select2 的 HTML 代码如下：

<div  ID="member_group">    <label >选择用户	<span >*</span>    </label>    <div >	<select  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?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元素，更无法被选中。

我们通过下面的方式，来实现默认选中。

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中select2多选，初始化默认选中项全部内容，希望文章能够帮你解决laravel中select2多选，初始化默认选中项所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。