Optgroup标签点击选子项及组外元素功能实现与报错排查

错误原因 #

你遇到的报错是因为直接给原生<optgroup>添加.select-all-group类无效——bootstrap-select会将原生下拉组件渲染为自定义DOM结构，原生optgroup会被转换为带.dropdown-header类的元素，原生optgroup本身不支持点击事件，且无效的类操作触发了DOMTokenList的空token错误。

修正后的完整代码 #

HTML（无需修改原结构）

<div class="form-wrapper">
    <form class="center" action="" method="get">
        <div class="form-group">
            <select class="input-fields selectStatuses" name="status[]" multiple>
                <option value="all">All statuses</option>
                <option value="creating-tasks"> Creating tasks</option>
                <optgroup label="In Progress">
                    <option value="ongoing">Ongoing</option>
                    <option value="in-progress">In progress</option>
                </optgroup>
            </select>
        </div>   
    </form>
</div>

JavaScript

$(document).ready(function() {
    $('.selectStatuses').selectpicker();
    let oldValue = $('option[value="all"]').val();

    // 保留原有的全选逻辑
    $('.selectStatuses').on('change', function(e) {
        e.stopImmediatePropagation();
        const $allOption = $('option[value="all"]', this);
        
        if ($allOption.is(':selected') && oldValue === "all") {
            $allOption.prop('selected', false);
            $('.selectStatuses').selectpicker('refresh');
            oldValue = "";
        } else if ($allOption.is(':selected')) {
            $(".selectStatuses").val(["all"]);
            $('.selectStatuses').selectpicker('refresh');
            oldValue = "all";
        }
    });

    // 实现分组标题点击选中/取消所有子选项
    $('.selectpicker').on('click', '.dropdown-header', function(e) {
        e.stopPropagation();
        // 获取分组标题文本，匹配原生optgroup
        const groupLabel = $(this).text().trim();
        const $groupOptions = $(`.selectStatuses optgroup[label="${groupLabel}"] option`);
        
        // 切换选中状态：已全选则取消，未全选则选中
        const isAllSelected = $groupOptions.filter(':selected').length === $groupOptions.length;
        $groupOptions.prop('selected', !isAllSelected);
        
        // 刷新selectpicker界面
        $('.selectStatuses').selectpicker('refresh');
    });
});

核心修改点 #

1. 绑定点击事件到bootstrap-select渲染后的.dropdown-header元素，这是分组标题实际对应的可点击DOM节点
2. 通过分组标题文本匹配原生optgroup，精准定位其下的所有选项
3. 增加切换逻辑，点击分组标题时自动反转子选项的选中状态，提升交互体验
4. 移除了无效的.select-all-group类绑定，彻底解决空token报错问题

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