сворачивающиеся группы, содержащие все непроверенные опции в boostrap-multiselect - PullRequest
Новая
       39

сворачивающиеся группы, содержащие все непроверенные опции в boostrap-multiselect

0 голосов
/ 14 февраля 2019

Я использую boostrap-multiselect для своего приложения.Поле выбора содержит три оптгруппы.Всякий раз, когда я нажимаю на какой-либо флажок в нем, я хочу свернуть optgroups, как только я переключаюсь на другую 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
});

По умолчанию все optgroups свернуты.Я хочу включить или отключить раскрытие групп opt, когда я переключился на другую группу optgroup для выбора.

Я не смог найти функциональность по умолчанию, предоставленную в документации по bootstrap-mulitselect.Может кто-нибудь, пожалуйста, помогите мне?

Заранее спасибо.

1 Ответ

0 голосов
/ 30 мая 2019

По умолчанию все optgroups свернуты.Я хочу включить или отключить развертывание оптгрупп, когда я переключился на другую оптгруппу для выбора.

Вы можете прикрепить обработчик события щелчка к каждому элементу multiselect-group .Внутри этого вы можете переключать видимость других optgroups. 

$("#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>

Вместо этого, если вам нужно переключить все optgroups, содержащие все непроверенные опции, вы можете проверить это в обработчике события 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>
...