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

本文实例讲述了laravel框架lect2多选插件初始化默认选中项操作。分享给大家供大家参考，具体如下：

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

lect2 的 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">  <lect class="form-control" name="ur_id[]" id="member_lect" multiple="multiple"></lect>  </div></div>

lect2 的 js 代码如下：

//选择用户$("#member_lect").lect2({  ajax: {    //请求的url    url: "{{ route('member.index') }}",    //返回的数据类型    datatype: "json",    //延迟时间，毫秒    delay: 500,    //是否缓存    cache: true,    //查询数据    data: function (params) {      //params.term就是你搜索输入的参数      return {        arch: 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  }}

在编辑消息时，我们需要查看，这条消息发送给了哪些人，这就需要进入编辑页面时，让 lect2 默认选中用户。

网上说通过如下方法可以选中。

$("#spread_lect").val([1, 2]).trigger("change")梦见很多苍蝇;

但是我们这里lect2的option是通过ajax动态加载的，刚进页面时，lect2的ajax根本没有触发，导致lect2中没有option元素，更无法被选中。

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

var lobj = [  {"id": 1, "name": "小徐"},  {"id": 2, "name": "小张"},  {"id": 3, "name": "小明"},];(function initl(lobj) {  if (lo反省作文bj) {    f我有想法or (var ix = 0; ix < lobj.length; ix++) {      var item = lobj[ix];      var option = new option(item.name, item.id, tru东汉皇帝e, true);      $("#member_lect").append(option);    }    $("#member_lect").trigger('change');  }})(lobj);

lobj中的数据，可以通过php后端生成好后，渲染到页面，然后通过json.par()解析成json对象。