Bootstrap多项选择-每个组都不选择或最多选择一个

Question

我使用bootstrap 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）都没有或最多允许一个选项？

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/[email protected]/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>

Bonus：通过在this.$select回调中使用$('#select-records')而不是onChange，可以使代码可重复使用，并且在同一页面上可以有多个选择项