本文介绍了Bootstrap的下拉多选框插件Bootstrap Multiselect，包括官方文档链接、文件引入方法、JSP页面应用、样式调整以及JavaScript操作示例。通过此插件，可以方便地实现下拉菜单的多选功能，并能根据option的id设置预选选项。
官方文档:http://davidstutz.github.io/bootstrap-multiselect/
引入文件：
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>使用
jsp页面
<div class="form-group">
<label class="col-sm-4 control-label"><i class="required">* </i>所属部门：</label>
<div class="col-sm-6">
<div class="myOwnDdl">
<select name="expendProject" id="user_dept" class="form-control">
<option value="" selected="selected">请选择部门</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label"><i class="required">* </i>所属角色：</label>
<div class="col-sm-6">
<div class="myOwnDdl">
<select name="expendProject" id="user_role" class="form-control" multiple="multiple">
<c:forEach var="var" items="${requestScope.roles }">
<option value="${var.id}">${var.roleName}</option>
</c:forEach>
</select>
</div>
</div>
</div>样式:
/* select -mul*/
/*自定义宽度*/
.myOwnDdl{
display:inline-block;
width:100%;
}
/* 实现宽度自定义 */
.myOwnDdl .btn-group{
width:100%;
}
.myOwnDdl .multiselect {
width:100%;
text-align:right;
margin-top:-5px;
}
.myOwnDdl ul {
width:100%;
}
.myOwnDdl .multiselect-selected-text {
position:absolute;
left:0;
right:25px;
text-align:left;
padding-left:20px;
}
/*控制隔行换色*/
.myOwnDll .multiselect-container li.odd {
background: #eeeeee;
}
/*//控制select文本内容位置*/
.btn-group>.btn:first-child {
margin-left: 0;
padding-right: 90%;
}
/* select -mul end */js:
$("#user_role").multiselect({ //分别为控制下拉容器最大高度、最多允许具体展示选中项数（其余以数字形式展示）、隔行换色控制、全选、支持检索。
maxHeight:300,
numberDisplayed:3,
optionClass: function(element) {
var value = $(element).parent().find($(element)).index();
if (value%2 == 0) {
return 'even';
}
else {
return 'odd';
}
},
includeSelectAllOption: true,
enableFiltering: true,
selectAllJustVisible: true,
nonSelectedText: '请选择角色', //默认展示文本
selectAllText: '全选' //全选文本
});效果展示:
如希望修改其宽度，参考：http://m.blog.youkuaiyun.com/article/details?id=50971672
根据option的id设置某个选项为被选择。
相关代码备忘:
// 用户角色分配
function user_role(userId) {
$("#add-role-form")[0].reset();
// 为表单隐藏域设置用户值
$("#userId").val(userId);
$("#user_role").multiselect({ //分别为控制下拉容器最大高度、最多允许具体展示选中项数（其余以数字形式展示）、隔行换色控制、全选、支持检索。
maxHeight:300,
numberDisplayed:3,
optionClass: function(element) {
var value = $(element).parent().find($(element)).index();
if (value%2 == 0) {
return 'even';
}
else {
return 'odd';
}
},
includeSelectAllOption: true,
enableFiltering: true,
selectAllJustVisible: true,
nonSelectedText: '请选择角色', //默认展示文本
selectAllText: '全选' , //全选文本,
onChange: function(option, checked, select) {
// 副处长展示业务
if($(option).text() == '副处长' && checked) {
//副处长id赋值
$("#userRoleId").val($(option).val());
$.get("mvc/system/get-business/"+"?"+Math.random(),function(resp){
var business = resp.business;
//拼接下拉框
$("#user_business option").remove();
var bus_options = $("#user_business");
if(business) {
$.each(business, function(index,item) {
bus_options.append($("<option />").val(item.id).text(item.keyValue));
});
$('#user_business').multiselect('rebuild');
$('#user_business').multiselect('enable');
}
},"json");
}else {
//清空
$("#user_business option").remove();
$('#user_business').multiselect('rebuild');
$('#user_business').multiselect('disable');
}
},
});
$('#user_business').multiselect({ //分别为控制下拉容器最大高度、最多允许具体展示选中项数（其余以数字形式展示）、隔行换色控制、全选、支持检索。
maxHeight:300,
numberDisplayed:3,
optionClass: function(element) {
var value = $(element).parent().find($(element)).index();
if (value%2 == 0) {
return 'even';
}
else {
return 'odd';
}
},
nonSelectedText: '请选择业务(副处长)', //默认展示文本
});
//设置样式
//后台查询用户部门
$.get("mvc/system/user-dept/"+userId+"?"+Math.random(),function(resp){
var depts = resp.depts;
//拼接下拉框
$("#user_dept option:not(:first)").remove();
var options = $("#user_dept");
$.each(depts, function(item,dept) {
options.append($("<option />").val(dept.id).text(dept.name));
});
$("#user_dept").multiselect({
onChange: function(option, checked, select) {
// 查询已有角色
var deptId = $(option).val();
if(deptId){
// 为表单隐藏域设置部门id
$("#userDept").val(deptId);
$.get("mvc/system/user-roles/"+userId+"/"+deptId+"?"+Math.random(),function (resp) {
var userRoles = resp.userRoles;
//包含副处长则业务多选可用
var flag = false;
$.each(userRoles,function (index,item) {
if (item.alertRole.remark == 'DEPUTY_TYPE') {//查询副处长业务
//副处长roleID
$("#userRoleId").val(item.alertRole.id);
//清空选择
$('#user_business option:selected').each(function() {
$(this).prop('selected', false);
})
flag = true;
$.get("mvc/system/get-business/"+"?"+Math.random(),function(resp){
var business = resp.business;
//拼接下拉框
$("#user_business option").remove();
var bus_options = $("#user_business");
if(business) {
$.each(business, function(index,item) {
bus_options.append($("<option />").val(item.id).text(item.keyValue));
});
$('#user_business').multiselect('rebuild');
}
},"json");
//查询业务并显示
$.post("mvc/system/get-business-select",
{ id: userId, did: deptId,rid: item.alertRole.id },
function(succ){
var bs = succ.business;
if(bs.length != 0) {
$.each(bs, function(index, item){
$('#user_business').multiselect('select', item.businessId);
});
}
},
"json");
$('#user_business').multiselect('refresh');
}
});
//不包含副处长则禁用多选框
if(!flag) {
//清空
$("#user_business option").remove();
$('#user_business').multiselect('rebuild');
$('#user_business').multiselect('disable');
}else {
$('#user_business').multiselect('enable');
}
//清空选择
$('#user_role option:selected').each(function() {
$(this).prop('selected', false);
})
$.each(userRoles, function(index, item){
$('#user_role').multiselect('select', item.alertRole.id);
});
$('#user_role').multiselect('refresh');
},"json");
}
},
});
},"json");
//业务
$("#user_role").multiselect({
})
//后台查询用户拥有角色
$("#userRoleModal").modal('show');
} //得到选择项
$('#dutyDeptId-update option:selected').map(function(index, item){
//item
});
扫一扫
3824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
