select2 ajax动态获取数据并回显

有这样一个需求：给员工分配角色，首先要获得这个员工已拥有的角色，并且要获得所有的角色列表。

具体效果如下

实现步骤：

1.加载所有的角色列表

因为是一个静态弹框，不能每次打开静态框的时候再发送请求加载角色列表，再页面初始化时应加载完成。

 /**
         * 页面初始化
         */
        $(function () {
            initRolesSelect();
        }
        
         function initRolesSelect() {
            Ctool.ajax.post({
                url: '/admin/sys/role/list',
                success: function (res) {
                    $('#selectRole').select2({
                        theme: "bootstrap",
                        multiple: true, //开启多选
                        data: res.data,  //返回的数据
                        minimumResultsForSearch: -1 //禁止搜索
                      
                    });

                }
            })
        }

根据官方文档只要返回的格式为

{ "results": [ { "id": 1, "text": "Option 1" }, { "id": 2, "text": "Option 2", "selected": true }, { "id": 3, "text": "Option 3", "disabled": true } ] }

这种格式的select2会自动渲染。selected 表示加载时是否被选中，disabled表示不可编辑。当然也可以自定义模板。因为需要在页面初始化时就加载角色列表，因此不能返回该员工已拥有的角色。定义的返回格式为 ：

console.log(res.data) //后端返回的数据

(4) [{…}, {…}, {…}, {…}]
0: {id: 1, text: "系统管理员"}
1: {id: 4, text: "员工"}
2: {id: 5, text: "老板"}
3: {id: 7, text: "码农"}
length: 4

2.通过人员id查找已拥有的角色并进行回显

//回显数据 
function echoSelect2(dom,value){
    $.each(value,function(index,value){
        $(dom).append(new Option(value.name, value.id, false, true));
    });
    $(dom).trigger("change");
}

原文：https://blog.csdn.net/u011067966/article/details/79154391 

通过这种方式进行回显的话会创建一个新的option进行回显,但下拉列表同时也就多了新的option。

 

最后查阅官方文档：$('#selectRole').val(['1', '2']); $('#selectRole').trigger('change');通过传入数组下表通过chang事件监听可以实现回显。

             /**
         * 分配角色回显
         * @param id
         */
        function allotRoleBtn(id) {
            $('#selectRole').val(null).trigger('change');//加载静态框时先清空。
            if (id) {
                Ctool.ajax.post({
                    url: '/admin/sys/user/allotsearch',
                    data: {id: id},
                    success: function (res) {
                        $('#allotRoleModal').modal('show'); //打开静态框
                        $('#allotRoleFrom').setForm(res.data.user);//对用户名和昵称进行回显

                        var role = res.data.role;//获取到该员工拥有的角色
                        var roles = []; //定义一个空数组用来存放角色id

                        if (role != "") {
                            $.each(role, function (index, role) {
                              
                               roles.push(role.id);

                            });
                            $('#selectRole').val(roles);
                            $('#selectRole').trigger("change");


                        }


                    }


                });
            }
        }