插件介绍：Bootstrap 下拉多选框插件Bootstrap Multiselect

爱被打了一巴掌 2022-07-11 09:12 372阅读 0赞

官方文档:[http://davidstutz.github.io/bootstrap-multiselect/][http_davidstutz.github.io_bootstrap-multiselect]  
引入文件：

使用  
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: '全选'  //全选文本
    
                });

效果展示:  
![这里写图片描述][SouthEast]  
如希望修改其宽度，参考：[http://m.blog.csdn.net/article/details?id=50971672][http_m.blog.csdn.net_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
                       });

[http_davidstutz.github.io_bootstrap-multiselect]: http://davidstutz.github.io/bootstrap-multiselect/
[SouthEast]: /images/20220711/98c334dbd0134b959ca06797f581def8.png
[http_m.blog.csdn.net_article_details_id_50971672]: http://m.blog.csdn.net/article/details?id=50971672