//说明 上次做了一个项目搞好用了这个插件 怎么都没有百度出来 现在搞完了给大家分享下
<div class="row">
<div class="col-sm-11">
<div class="input-group">
<span class="input-group-addon">
角色:
</span>
<div class="form-group">
<select multiple="multiple" id="selectRoles
name="rolesSelect"></select>
<input name="roles" id="rolesSelect" hidden/>
</div>
</div>
</div>
</div>
首先动态获取下拉框
function initRole() {
$.post(ctx + "role/list", {}, function (r) {
var data = r.rows;
var option = "";
for (var i = 0; i < data.length; i++) {
option += "<option value='" + data[i].roleId + "'>" + data[i].roleName + "</option>"
}
$rolesSelect.html("").append(option);
var options = {
selectAllText: '所有角色',
allSelected: '所有角色',
width: '100%',
onClose: function () {
$roles.val($rolesSelect.val());
validator.element("input[name='roles']");
}
};
$rolesSelect.multipleSelect(options);
});
}
一个动态的拉下款就完成了
//如果你想换成单选的下拉框 加一个下面的
function initRole() {
$.post(ctx + "role/list", {}, function (r) {
var data = r.rows;
var option = "";
for (var i = 0; i < data.length; i++) {
option += "<option value='" + data[i].roleId + "'>" + data[i].roleName + "</option>"
}
$rolesSelect.html("").append(option);
var options = {
single: true, //单选加入这个 如果是多选去掉即可
width: '100%',
onClose: function () {
$roles.val($rolesSelect.val());
validator.element("input[name='roles']");
}
};
$rolesSelect.multipleSelect(options);
});
}
//下面是最重要的就是数据的回显 之前搞了我一天 多选的回显
//数组
var roleArr = [];
//user.roleIds 回显的值 因为多选所有这一块要拆分一下
for (var i = 0; i < user.roleIds.length; i++) {
roleArr.push(user.roleIds[i]);
}
//数据的回显
$form.find("select[name='rolesSelect']").multipleSelect('setSelects', roleArr);
//数据的选中
$form.find("input[name='roles']").val($form.find("select[name='rolesSelect']").val());
//单选的回显
//动态回显下拉框回显 赋值的时候一定要注意的是[] 这个框 之前一直没有加这个导致一直回显不了
$("select[name='rolesSelect']").multipleSelect('setSelects',[user.roleID]);
//动态下拉框回显以后赋值
$form.find("input[name='roles']").val($form.find("select[name='rolesSelect']").val());