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

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

select2 的 html 代码如下：

1. <div class="form-group" id="member_group"> 
2.   <label class="col-lg-3 control-label required">选择用户 
3.   <span class="required">*</span> 
4.   </label> 
5.   <div class="col-lg-4"> 
6.   <select class="form-control" name="user_id[]" id="member_select" multiple="multiple"></select> 
7.   </div> 
8. </div> 

select2 的 js 代码如下：

1. //选择用户 
2. $("#member_select").select2({ 
3.   ajax: { 
4.     //请求的URL 
5.     url: "{{ route('member.index') }}", 
6.     //返回的数据类型 
7.     dataType: "json", 
8.     //延迟时间，毫秒 
9.     delay: 500, 
10.     //是否缓存 
11.     cache: true, 
12.     //查询数据 
13.     data: function (params) { 
14.       //params.term就是你搜索输入的参数 
15.       return { 
16.         search: params.term, 
17.         page: params.page || 1 
18.       }; 
19.     }, 
20.     //请求结果回调函数，data就是后端返回的数据 
21.     processResults: function (data, params) { 
22.       var data = data.data; 
23.       var results = []; 
24.       //循环数据，将数据压入results中 
25.       //注意数据必须要有二个属性，id和text，分别对应option的value和文本 
26.       //网上有些说无法选中元素，请先检查这里，你是否设置了id，并且不为空 
27.       $(data.data).each(function (i, obj) { 
28.         results.push({ 
29.           id: obj.id, 
30.           text: obj.name 
31.         }); 
32.       }); 
33.       return { 
34.         results: results, 
35.         pagination: { 
36.           more: (data.current_page * data.per_page) < data.total 
37.         } 
38.       }; 
39.     } 
40.   }, 
41.   placeholder: '选择用户', 
42.   //是否多选 
43.   multiple: true, 
44.   allowClear: true 
45. }); 

后端返回的数据如下，直接使用 laravel 的 paginate() 方法 返回分页数据。

1. { 
2.   "status_code":200, 
3.   "message":"查询成功", 
4.   "data":{ 
5.     "current_page":1, 
6.     "data":[ 
7.       { 
8.         "id":2006, 
9.         "name":"用户1" 
10.       }, 
11.       { 
12.         "id":2005, 
13.         "name":"用户3" 
14.       }, 
15.       { 
16.         "id":2004, 
17.         "name":"用户3" 
18.       } 
19.     ], 
20.     "first_page_url":"http://test.me/member/index?page=1", 
21.     "from":1, 
22.     "last_page":1, 
23.     "last_page_url":"http://test.me/member/index?page=1", 
24.     "next_page_url":"http://test.me/member/index?page=1", 
25.     "path":"http://test.me/member/index", 
26.     "per_page":1, 
27.     "prev_page_url":null, 
28.     "to":null, 
29.     "total":3 
30.   } 
31. } 

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

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

$("#spread_select").val([1, 2]).trigger("change");

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

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

1. var selObj = [ 
2.   {"id": 1, "name": "小徐"}, 
3.   {"id": 2, "name": "小张"}, 
4.   {"id": 3, "name": "小明"}, 
5. ]; 
6. (function initSel(selObj) { 
7.   if (selObj) { 
8.     for (var ix = 0; ix < selObj.length; ix++) { 
9.       var item = selObj[ix]; 
10.       var option = new Option(item.name, item.id, true, true); 
11.       $("#member_select").append(option); 
12.     } 
13.     $("#member_select").trigger('change'); 
14.   } 
15. })(selObj); 

selObj中的数据，可以通过PHP后端生成好后，渲染到页面，然后通过JSON.parse()解析成JSON对象。

Tags: laravel多选插件 select2

分享到：