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

本文实例讲述了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":"https://test.me/member/index?page=1",      "from":1,      "last_page":1,      "last_page_url":"https://test.me/member/index?page=1",      "next_page_url":"https://test.me/member/index?page=1",      "path":"https://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程序设计有所帮助。

—-想了解laravel框架select2多选插件初始化默认选中项操作示例分享！且更多的php教程关注<计算机技术网(www.ctvol.com)!!>