bootstrap-select v1.13.18：仅optgroup选项可多选的实现方案咨询

Bootstrap-select v1.13.18没有内置支持这种特殊多选规则的配置项，需要自行编写JavaScript逻辑来实现需求。

第一步：修正HTML结构 #

注意<optgroup>标签不支持multiple属性，该属性需要添加到<select>标签上，调整后的代码如下：

<select class="selectpicker" data-container="body" id="levels" multiple>
  <option value="1">My tasks</option>
  <optgroup id="departments" label="Departments tasks:">
    <option value="8">Service</option>
    <option value="1">Production</option>
  </optgroup>
  <option value="3" selected>All tasks</option>
</select>

第二步：编写自定义逻辑 #

通过监听Bootstrap-select的changed.bs.select事件，处理不同选项的选中规则：

$('#levels').on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue) {
  const $select = $(this);
  const $allOptions = $select.find('option');
  const clickedOption = $allOptions.eq(clickedIndex);
  const isGroupOption = clickedOption.parent('optgroup').length > 0;

  if (isSelected) {
    if (!isGroupOption) {
      // 选中非分组选项：清空所有其他选项的选中状态
      $allOptions.not(clickedOption).prop('selected', false);
    } else {
      // 选中分组内选项：清空所有非分组选项的选中状态
      $allOptions.not('optgroup > option').prop('selected', false);
    }
  }

  // 刷新选择器UI，确保状态同步
  $select.selectpicker('refresh');
});

逻辑说明 #

• 当选中非<optgroup>下的选项时，自动取消所有其他选项（包括分组内的选项）的选中状态，保证仅当前非分组选项被选中
• 当选中**<optgroup>下的选项**时，自动取消所有非分组选项的选中状态，但保留其他分组内已选中的选项，支持分组内/跨分组的多选
• 每次状态变更后调用selectpicker('refresh')，确保选择器UI与实际选中状态同步

内容的提问来源于stack exchange，提问作者ketna