如何使 bootstrap 多选选项组默认折叠？

Question

我正在使用 bootstrap's multiselect 并将 enableCollapsibleOptGroups 设置为 true。

我现在拥有的：

我希望默认折叠 optgroups：

Answer 1

我在这里添加了一个简单的例子：http://davidstutz.github.io/bootstrap-multiselect/#configuration-options-enableCollapsibleOptGroups。

诀窍是在加载页面后为每个组触发一次点击事件：

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-enableCollapsibleOptGroups-collapsed').multiselect({
            enableCollapsibleOptGroups: true,
            buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />'
        });
        $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
    });
</script>
<select id="example-enableCollapsibleOptGroups-collapsed" multiple="multiple">
    <optgroup label="Group 1">
        <option value="1-1" disabled>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">
        <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>

Answer 2

大卫的回答对我不起作用。但是这两个解决方案有效：

解决方案一：

buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />',
onDropdownShown: function() {
                $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
            },
onDropdownHidden: function() {
                $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
            }

方案二：

buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />'

然后：

setTimeout( function(){ 
    $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
}  , 2000 );

Answer 3

我想出了适合我的不同解决方案。

HTML:

<div id="multiselect-filter-dropdown-wrapper">
  <label id="multiselect-filter-dropdown-label">Filter:</label>

  <select multiple id="multiselect-filter-dropdown"></select>
</div>

JS:

$('#multiselect-filter-dropdown').multiselect({
  enableCollapsibleOptGroups: true
}); //init with required options

$('#multiselect-filter-dropdown').multiselect('dataprovider', multiselectFilterDataProvider); //populate with required data

$('#multiselect-filter-dropdown-wrapper ul.multiselect-container li:not(.multiselect-all):not(.multiselect-group)')
.hide()
.addClass('multiselect-collapsible-hidden'); //collapse required opt groups

Answer 4

经过长时间的尝试，它对我有用。

代码如下：

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<select id="products" multiple="multiple">
                    <optgroup class="test" label="Group 1" >
                        <option value="Option 1.1">Option 1.1</option>
                        <option value="Option 1.2">Option 1.2</option>
                        <option value="Option 1.3">Option 1.3</option>
                    </optgroup>
                    <optgroup label="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>

<script type="text/javascript">
        $(document).ready(function() {
            $('#products').multiselect({
                enableCollapsibleOptGroups: true,
                collapseOptGroupsByDefault: true
            });
        });
</script>

<style>
li.multiselect-item.multiselect-group input[type="checkbox"]{
    display:none;
}
</style>

如何使 bootstrap 多选选项组默认折叠？

How can I make bootstrap multiselect optgroups collapse by default?

javascript

css

jquery

bootstrap-multiselect