Bootstrap Select多选下拉菜单：全选失效与选中数量显示异常求助

问题描述 #

• 点击「All statuses」(value='all')选项时，无法取消已选中的其他选项
• 选中选项数量超过3个时，无法显示如'4 select(s)'的选中数量提示文本

修复代码 #

JavaScript #

$(document).ready(function() {
    // 初始化组件，配置超过3个选项时默认显示计数
    $('.selectStatuses').selectpicker({
        selectedTextFormat: 'count >3'
    });

    $('.selectStatuses').on('change', function() {
        const $select = $(this);
        const isAllSelected = $select.find('option[value="all"]').is(':selected');
        let selectedValues = $select.val() || [];

        // 处理All选项的选中逻辑
        if (isAllSelected) {
            // 选中All时，取消其他所有选项
            if (selectedValues.length > 1) {
                $select.val(['all']);
                $select.selectpicker('refresh');
                selectedValues = ['all'];
            }
        } else {
            // 选中其他选项时，若All之前被选中则取消
            if (selectedValues.includes('all')) {
                selectedValues = selectedValues.filter(val => val !== 'all');
                $select.val(selectedValues);
                $select.selectpicker('refresh');
            }
        }

        // 处理选中数量提示与样式
        const selectedCount = selectedValues.length;
        if (selectedCount > 3) {
            $select.selectpicker('setStyle', 'btn-danger', 'replace');
            $select.selectpicker('setTitle', `${selectedCount} select(s)`);
        } else {
            $select.selectpicker('setStyle', 'btn-default', 'replace');
            // 根据选中状态设置标题文本
            if (selectedValues.includes('all')) {
                $select.selectpicker('setTitle', 'All statuses');
            } else {
                $select.selectpicker('setTitle', selectedCount > 0 ? null : 'Select');
            }
        }
    });
});

CSS #

.select {
  /* 仅用于演示 */
  margin-top: 50px;
  margin-left: 50px;
}

HTML #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<div class="select">
  <select class="input-fields selectStatuses" name="status[]" multiple>
      <option value="all" selected>All statuses</option>
      <option value="status_1">Status 1</option>
      <option value="status_2">Status 2</option>
      <option value="status_3">Status 3</option>
      <option value="status_4">Status 4</option>
      <option value="status_5">Status 5</option>
  </select>
</div>

修复说明 #

1. All选项逻辑：

   • 当「All statuses」被选中时，强制将选中值重置为仅包含all，并调用refresh更新组件UI
   • 当选中其他选项时，自动过滤掉all选项，确保两者不会同时被选中

2. 数量提示与样式：

   • 初始化时配置selectedTextFormat: 'count >3'，作为组件默认的计数显示逻辑
   • 在change事件中，根据选中数量动态切换按钮样式，并自定义计数文本
   • 针对「All statuses」单独处理显示文本，避免计数逻辑覆盖特殊选项的显示

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