Question

我正在为我的应用程序使用boostrap-multiselect。选择框包含三个optgroup。每当我单击其中的某个复选框时，我都想在切换到另一个optgroup时折叠optgroup。

这是示例代码

<select multiple="multiple" id="food_type">
    <optgroup label="Breakfast">
        <option value="Burger">Burger</option>
        <option value="Fries">Fries</option>
    </optgroup>
    <optgroup label="Lunch">
        <option value="Pizza">Pizza</option>
        <option value="Thali">Thali</option>
    </optgroup>
    <optgroup label="Desserts">
        <option value="Icecreame">Icecreame</option>
        <option value="Fruit Salad">Fruit Salad</option>
    </optgroup>
</select>

$("#food_type").multiselect({
    numberDisplayed: 1,
    buttonText: function (options, select){
        return "Food Types";
    },
    enableCollapsibleOptGroups: true,
    collapseOptGroupsByDefault: true
});

默认情况下，所有optgroup均处于折叠状态。我想在切换到另一个optgroup进行选择时切换optgroup的合拢展开。

我找不到bootstrap-mulitselect文档中提供的默认功能。谁能帮我吗？

谢谢。

Answer 1

默认情况下，所有optgroup均处于折叠状态。我想在切换到另一个optgroup进行选择时切换optgroup的合拢展开。

您可以将click事件处理程序附加到每个 multiselect-group 元素。在其中，您可以切换其他optgroup的可见性。

$("#food_type").multiselect({
    numberDisplayed: 1,
    buttonText: function (options, select) {
        return "Food Types";
    },
    enableCollapsibleOptGroups: true,
    collapseOptGroupsByDefault: true
}).data('multiselect').$ul.find('.multiselect-group').on('click', function(e) {
    $(this).siblings('.multiselect-group').nextUntil('.multiselect-group')
            .addClass('multiselect-collapsible-hidden').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script src="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>


<div class="container">
    <div class="row">
        <select multiple="multiple" id="food_type">
            <optgroup label="Breakfast">
                <option value="Burger">Burger</option>
                <option value="Fries">Fries</option>
            </optgroup>
            <optgroup label="Lunch">
                <option value="Pizza">Pizza</option>
                <option value="Thali">Thali</option>
            </optgroup>
            <optgroup label="Desserts">
                <option value="Icecreame">Icecreame</option>
                <option value="Fruit Salad">Fruit Salad</option>
            </optgroup>
        </select>
    </div>
</div>

相反，如果需要切换包含所有未选中选项的所有optgroup，则可以在click事件处理程序中对其进行测试：

$("#food_type").multiselect({
numberDisplayed: 1,
buttonText: function (options, select) {
return "Food Types";
},
enableCollapsibleOptGroups: true,
collapseOptGroupsByDefault: true
}).data('multiselect').$ul.find('.multiselect-group').on('click', function (e) {
  $(this).siblings('.multiselect-group').each(function(idx, ele) {
      var eles = $(ele).nextUntil('.multiselect-group');
      if (eles.find(':checked').length == 0) {
          eles.addClass('multiselect-collapsible-hidden').hide();
      }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"
    href="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script src="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>


<div class="container">
    <div class="row">
        <select multiple="multiple" id="food_type">
            <optgroup label="Breakfast">
                <option value="Burger">Burger</option>
                <option value="Fries">Fries</option>
            </optgroup>
            <optgroup label="Lunch">
                <option value="Pizza">Pizza</option>
                <option value="Thali">Thali</option>
            </optgroup>
            <optgroup label="Desserts">
                <option value="Icecreame">Icecreame</option>
                <option value="Fruit Salad">Fruit Salad</option>
            </optgroup>
        </select>
    </div>
</div>

折叠的optgroup，其中包含boostrap-multiselect中所有未选中的选项

1 个答案: