下拉多选框bootstrap-multiselect教程

梁存
2023-12-01


项目中要用到下拉多选框,搜了一下,感觉bootstrap-multiselect,不错,今天来简单介绍一下:
测试页面:
Java代码  收藏代码
<html lang="en">  
<head>  
<meta charset="utf-8" />  
<!--注意这里jquery的版本和css,js引入的顺序 -->  
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" type="text/css"/>  
<script type="text/javascript" src="./jquery/js/jquery-1.9.1.min.js"></script>  
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>  
   
<!-- Include the plugin's CSS and JS: -->  
<!-- <script type="text/javascript" src="./dist/js/bootstrap-multiselect.js"></script> -->  
<!--无选择提示为中文,只是部分中文 -->  
<script type="text/javascript" src="./dist/js/bootstrap-multiselect_cn.js"></script>  
<link rel="stylesheet" href="./dist/css/bootstrap-multiselect.css" type="text/css"/>  
<script type="text/javascript">  
    console.log("start");  
    $(document).ready(function() {  
        $('#example-multiple').multiselect();  
        $('#example-radio').multiselect();  
        $('#example-multiple-optgroups').multiselect();  
        $('#example-radio-optgroups').multiselect();  
        /*
        *分组可选,可折叠,全选时不显示,所有option的数量
        */  
        $('#example-enableClickableOptGroups').multiselect({  
                                enableClickableOptGroups: true,  
                selectAllNumber: false  
        });  
        /*
        *分组可选,可折叠,可全选,右侧显示下拉选项,
        *触发选择事件,可搜索,可展示已选择option的数量(numberDisplayed)
        */  
        $('#example-all').multiselect({  
                enableClickableOptGroups: true,  
                enableCollapsibleOptGroups: true,  
                includeSelectAllOption: true,  
                buttonWidth: '400px',  
                dropRight: true,  
                maxHeight: 200,  
                onChange: function(option, checked) {  
                alert($(option).val());  
                                /*if(条件) {
                      this.clearSelection();//清除所有选择及显示
                 }*/  
                },  
                nonSelectedText: '请选择',  
                numberDisplayed: 10,  
                enableFiltering: true,  
                allSelectedText:'全部',  
        });  
          
    });  
</script>  
</head>  
<body style="margin-left:10;">  
 1.多选下拉框:  
 
    <select id="example-multiple" multiple="multiple">  
        <option value="cheese">Cheese</option>  
        <option value="tomatoes">Tomatoes</option>  
        <option value="mozarella">Mozzarella</option>  
        <option value="mushrooms">Mushrooms</option>  
        <option value="pepperoni">Pepperoni</option>  
        <option value="onions">Onions</option>  
    </select>  
    <BR/>  
2.单选下拉框:  
 
    <select id="example-radio">  
        <option value="cheese">Cheese</option>  
        <option value="tomatoes">Tomatoes</option>  
        <option value="mozarella">Mozzarella</option>  
        <option value="mushrooms">Mushrooms</option>  
        <option value="pepperoni">Pepperoni</option>  
        <option value="onions">Onions</option>  
    </select>  
    <BR/>  
从上面两个来看,能不能多选,主要是multiple="multiple"属性配置...  
 
3.多选分组下拉框:  
 
    <select id="example-multiple-optgroups" multiple="multiple">  
        <optgroup label="Group 1" class="group-1">  
            <option value="1-1">Option 1.1</option>  
            <option value="1-2" selected="selected">Option 1.2</option>  
            <option value="1-3" selected="selected">Option 1.3</option>  
        </optgroup>  
        <optgroup label="Group 2" class="group-2">  
            <option value="2-1">Option 2.1</option>  
            <option value="2-2">Option 2.2</option>  
            <option value="2-3">Option 2.3</option>  
        </optgroup>  
    </select>  
    <BR/>  
4.单选分组下拉框:  
 
    <select id="example-radio-optgroups">  
        <optgroup label="Group 1" class="group-1">  
            <option value="1-1">Option 1.1</option>  
            <option value="1-2" selected="selected">Option 1.2</option>  
            <option value="1-3" selected="selected">Option 1.3</option>  
        </optgroup>  
        <optgroup label="Group 2" class="group-2">  
            <option value="2-1">Option 2.1</option>  
            <option value="2-2">Option 2.2</option>  
            <option value="2-3">Option 2.3</option>  
        </optgroup>  
    </select>  
    <BR/>  
5.分组多选下拉框:  
 
    <select id="example-enableClickableOptGroups" multiple="multiple">  
        <optgroup label="Group 1" class="group-1">  
            <option value="1-1">Option 1.1</option>  
            <option value="1-2">Option 1.2</option>  
            <option value="1-3">Option 1.3</option>  
        </optgroup>  
        <optgroup label="Group 2" class="group-2">  
            <option value="2-1" disabled="disabled">Option 2.1</option>  
            <option value="2-2">Option 2.2</option>  
            <option value="2-3">Option 2.3</option>  
        </optgroup>  
    </select>  
6.分组多选,可折叠,可全选下拉框:  
 
    <select id="example-all" multiple="multiple">  
        <optgroup label="Group 1" class="group-1">  
            <option value="1-1">Option 1.1</option>  
            <option value="1-2" selected="selected">Option 1.2</option>  
            <option value="1-3" selected="selected">Option 1.3</option>  
        </optgroup>  
        <optgroup label="Group 2" class="group-2">  
            <option value="2-1">Option 2.1</option>  
            <option value="2-2">Option 2.2</option>  
            <option value="2-3">Option 2.3</option>  
        </optgroup>  
    </select>  
</body>  
</html>  

效果如下:

 

 

 

 

 

 


使用过程中发现与<link rel="stylesheet" href="static/css/ace.min.css" />的ace.min.css样式单冲突,multiselect下拉框checkbox不显示,

 

查看下拉框与页面中的checkbox有什么不同,
发现页面中checkbox多了一个<span class="lbl"/>,而multiSelect 下拉框中的checkbox中没有,看看能不能,修改JS,bootstrap-multiselect_cn.js;在脚本中createOptionValue方法中,修改
Java代码  收藏代码
<script type="text/javascript" src="./dist/js/bootstrap-multiselect_cn.js"></script>  
      /**
         * Create an option using the given select option.
         *
         * @param {jQuery} element
         */  
        createOptionValue: function(element) {  
            var $element = $(element);  
            if ($element.is(':selected')) {  
                $element.prop('selected', true);  
            }  
 
            // Support the label attribute on options.  
            var label = this.options.optionLabel(element);  
            var classes = this.options.optionClass(element);  
            var value = $element.val();  
            var inputType = this.options.multiple ? "checkbox" : "radio";  
 
            var $li = $(this.options.templates.li);  
            var $label = $('label', $li);  
            $label.addClass(inputType);  
            $li.addClass(classes);  
 
            if (this.options.enableHTML) {  
                $label.html(" " + label);  
            }  
            else {  
                $label.text(" " + label);  
            }  
            //var $checkbox = $('<input/>').attr('type', inputType);  
             
            var $checkbox =  $('<input/>').attr('type', inputType);  
        //测试修改如下  
            //$checkbox.append('<span class="lbl"/>');  
            //$checkbox.after('<span class="lbl"/>');  
            //$('<input>').append('<span class="lbl"/>');  
            //var $checkbox = $('<input/>').attr('type', 'radio'));  
            //solve the ace-admin-min.css,input type is checkbox css collision  
            //var $checkbox = $('<input/>').attr('class', "lbl");  
            //.append('<span class="lbl">&nbsp;信用证</span>'  
        var name = this.options.checkboxName($element);  
            if (name) {  
                $checkbox.attr('name', name);  
            }  
 
            $label.prepend($checkbox);  
        ...  
}  

测试发现:
Java代码  收藏代码
$checkbox.append('<span class="lbl"/>');//这个不是我们想要的  

我们想要的是after产生的效果,
Java代码  收藏代码
$checkbox.after('<span class="lbl"/>');//无效,jquery,找不到,  

但通id可以,调用after可以产生效果,而$('<input/>').after和通过class找不到。
至于问什么,没能解决,知道可以给我留言,谢谢。
参考:
JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用:http://www.cnblogs.com/wx1993/p/4806873.html

放弃修改Js,修改css,bootstrap-multiselect

修改
Java代码  收藏代码
<link rel="stylesheet" href="./dist/css/bootstrap-multiselect.css" type="text/css"/>  
 
.multiselect-container>li>a>label>input[type=checkbox] {  
    margin-bottom: 5px  
}  


Java代码  收藏代码
.multiselect-container>li>a>label>input[type=checkbox] {  
    margin-bottom: 5px;  
    margin-left: 20px;  
    opacity:1;/*checkbox透明度*/  
    position:relative     
}  

添加如下样式:
Java代码  收藏代码
.multiselect.dropdown-toggle.btn.btn-default {  
    background-color: #dbd8d8 !important;  
    color: black !important;  
    border: #c92727 !important;  
    box-shadow: none !important;  
    text-shadow: 0 -1px 0 #d8c8c8 !important;  
}  
.btn.btn-default.multiselect-clear-filter {  
    background-color: #fff9f9 !important;  
    border: #c34e4e !important;  
}  

使用!important主要是,主要让样式的优先级变高,可以来指定,不让ace.min.css覆盖:。
参考:
css样式加载顺序及覆盖顺序深入理解:http://www.jb51.net/css/124992.html
html、css、js文件加载顺序及执行情况:http://www.cnblogs.com/Walker-lyl/p/5262075.html
CSS样式加载顺序:
1.<head>标签内有一个<link>标签引用外部CSS文件
2.内部css样式
3.标签style样式
即按在html中css出现的顺序;但这些样式是有优先级的如下,
CSS样式覆盖顺序深入理解:
1. 样式表的元素选择器选择越精确,则其中的样式优先级越高:
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
2. 对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高
注意,这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。
3. 如果要让某个样式的优先级变高,可以使用!important来指定


测试页面:
Java代码  收藏代码
<html>  
    <head>  
        <meta charset="utf-8">  
        <script type="text/javascript" src="./bootstrap-multiselect-master/jquery/js/jquery-1.9.1.min.js"></script>  
        <script type="text/javascript">  
            console.log("start");  
            $(document).ready(function() {  
                //$('<input/>').append('<span class="lbl"/>');  
                //var $input = $('<input/>').attr('type', 'checkbox');  
                // $('<input>')创建一个input标签  
                var $input = $('<input>').attr('type', 'checkbox');  
                $input.val("c");  
                $input.addClass("multiselect-ace")  
                $(".multiselect-ace").after('<span class="lbl"/>');  
                //$input.append('<span class="lbl"/>');  
                //$input.after('<span class="lbl"/>');//无效,jquery,找不到,  
                $('<span class="lbl"/>').insertAfter($input);  
                //$('<span class="lbl"/>').appendTo($input);  
                //$input.appendTo('<span class="lbl"/>');  
                //var $input = $('<input/>').append('<span class="lbl"/>');  
                $("#test").append($input);  
                //$("#test").after('<span class="lbl"/>');  
                //alert( $('<input/>').val());  
              
            });  
        </script>  
    </head>  
    <body>  
        <select>  
            <option>test</option>  
        </select>  
        <BR/>  
        <input id="test" type="radio" name="test" value="v"/>  
        <BR/>  
        <!-- <input type="checkbox"/> -->  
    </body>  
</html>  
 


转自http://donald-draper.iteye.com/blog/2373860

bootstrap-multiselect:https://github.com/davidstutz/bootstrap-multiselect

bootstrap-multiselect doc:http://davidstutz.github.io/bootstrap-multiselect/

 类似资料: