Bootstrap multiselect - выберите нет или максимум по одной из каждой группы - PullRequest
Новая
       34

Bootstrap multiselect - выберите нет или максимум по одной из каждой группы

0 голосов
/ 25 января 2020

Я использую bootsrtrap multiselect, и с помощью приведенного ниже я могу выбрать ни один, или максимум один из доступных вариантов: 

<select id="select-records" multiple="multiple">
    <option value="50203_0">50203 - 0</option>
    <option value="50203_50">50203 - 50</option>
    <option value="50203_500">50203 - 500</option>
</select>

// Multiselect
$('#select-records').multiselect({
    maxHeight: 400,
    buttonWidth: '100%',
    onChange: function(element, checked) {
        var getValue = $('#select-records').val();
        console.log(getValue);
        if (getValue) {
            getValue = getValue.filter(function(item) {
                    return item !== ''+element.val()+''
            })
            $("#select-records").multiselect('deselect', ''+getValue +'');
            $("#select-records").multiselect('select', element.val());
        }
    }                   
});

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

<select id="select-records" multiple="multiple">
    <option value="50203_0">50203 - 0</option>
    <option value="50203_50">50203 - 50</option>
    <option value="50203_500">50203 - 500</option>
    <option value="60113_0">60113 - 0</option>
    <option value="60113_20">60113 - 50</option>
    <option value="60113_400">60113 - 500</option>
    <option value="70308_0">70308 - 0</option>
    <option value="70308_40">70308 - 50</option>
    <option value="70308_800">70308 - 500</option>
    /* .... Infinit additional groups */                
</select>

Как мне нужно изменить onChange множественного выбора, чтобы разрешить ни одну, или не более одной опции для каждой группы (группа: 50203 или 60113 или 70308)?

1 Ответ

1 голос
/ 25 января 2020

Вы можете сделать это так: 

$('#select-records').multiselect({
  maxHeight: 400,
  buttonWidth: '100%',
  onChange: function (element, checked) {
    // If an element was just checked
    if (checked) {
      // Get its value
      var newValue = element.val();
      // And its group
      var newGroup = newValue.split('_')[0];
      // Get all checked values
      var checkedValues = this.$select.val();
      // Find one with the same group but different value
      var valueToDeselect = checkedValues.find(function (v) {
        return v.split('_')[0] === newGroup && v !== newValue;
      });
      // If we find one, deselect it
      if (valueToDeselect !== undefined) {
        this.$select.multiselect('deselect', '' + valueToDeselect);
      }
    }
  }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>

<select id="select-records" multiple="multiple" class="form-control">
    <option value="50203_0">50203 - 0</option>
    <option value="50203_50">50203 - 50</option>
    <option value="50203_500">50203 - 500</option>
    <option value="60113_0">60113 - 0</option>
    <option value="60113_20">60113 - 50</option>
    <option value="60113_400">60113 - 500</option>
    <option value="70308_0">70308 - 0</option>
    <option value="70308_40">70308 - 50</option>
    <option value="70308_800">70308 - 500</option>
</select>

Бонус: Используя this.$select вместо $('#select-records') в вашем onChange обратном вызове, вы можете сделать свой код многоразовым, с несколькими вариантами выбора на одной странице

...