Bootstrap 多选 - Select none 或每组最多一个

Question

我使用 bootsrtrap multiselect 并且在下面我可以 select none 或最多可用的选项之一：

<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 选项中有更多可用的组...例如

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

我如何需要更改 multiselect 的 onChange 以允许每个组（组：50203 或 60113 或 70308）中的任一个 none 或最多一个选项？

Answer 1

你可以这样做：

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

奖励： 通过在 onChange 回调中使用 this.$select 而不是 $('#select-records')，您可以使您的代码可重复使用，并进行多次选择在同一页上

Bootstrap 多选 - Select none 或每组最多一个

Bootstrap multiselect - Select none or max one of each group

javascript

jquery

bootstrap-multiselect