Question

我正在使用bootstrap's multiselect并将function getWeather() { $.ajax({ url: baseURL + key + lat + "," + lon, success: function () { console.log("the api responded with the weather :)"); $(".desc").text("If it worked this will appear"); } });设置为true。

我现在拥有的：

我希望默认情况下折叠optgroup：

Answer 1

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

解决方案1：

解决方案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" />'

Answer 2

我在这里添加了一个简单的示例：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 3

长时间尝试后，它对我有用。

代码如下：

<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>

Answer 4

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

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

默认情况下，如何使bootstrap multiselect optgroup崩溃？

4 个答案: