html中ajax回显数据,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");

}

}

});

}

}

标签：function,角色,回显,text,id,获取数据,ajax,role,select2

来源： https://blog.csdn.net/wang710815126/article/details/88924661