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":"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的dd函数不生效怎么办
看不懂laravel文档咋办
安装laravel框架出现command怎么办
Laravel开发API怎么使用事务
laravel怎么构建复杂查询条件
laravel如何实现防止被下载