如何用JavaScript在分组下拉列表顶部添加全选/取消全选选项

现有一个数据列表，需按 data.list[i].SubType.Name 对列表按同名子类型分组，在每个分组顶部添加带复选框的选项：未选中任何项时显示“全选”，选中全部项时显示“取消全选”。尝试使用concat方法实现但未生效，当前代码如下：

if (data.List && data.List.length > 0) {
    data.List.forEach(function(item) {
        // 需要给同类型的项顶部添加全选选项，比如2条"学前班"记录顶部加"全选"，1条"幼儿园"记录顶部也加"全选"
        Students.loadDataViaReader(data.List);
    }
}

要实现分组加全选控制的需求，需要先完成数据分组，再给每个分组插入全选控制项，最后处理复选框的状态切换逻辑，具体代码如下：

if (data.List && data.List.length > 0) {
    // 1. 按SubType.Name对数据分组
    const groupedData = {};
    data.List.forEach(item => {
        const typeName = item.SubType.Name;
        groupedData[typeName] = groupedData[typeName] || [];
        groupedData[typeName].push(item);
    });

    // 2. 给每个分组添加全选控制项，合并为最终数据列表
    const finalData = [];
    Object.keys(groupedData).forEach(typeName => {
        // 创建全选控制项，标记isCheckAll用于区分普通数据项
        const checkAllItem = {
            isCheckAll: true,
            SubType: { Name: typeName },
            displayText: '全选',
            isChecked: false
        };
        // 将控制项放在分组最前面，再追加分组内的所有数据项
        finalData.push(checkAllItem, ...groupedData[typeName]);
    });

    // 3. 加载处理后的数据
    Students.loadDataViaReader(finalData);

    // 4. 处理复选框状态切换（需根据实际DOM结构调整选择器）
    document.addEventListener('change', (e) => {
        const checkbox = e.target;
        if (checkbox.type !== 'checkbox') return;

        const typeName = checkbox.dataset.subtypeName;
        const isCheckAll = checkbox.dataset.isCheckAll === 'true';

        if (isCheckAll) {
            // 点击全选/取消全选按钮，同步分组内所有项的选中状态
            const groupItems = document.querySelectorAll(`[data-subtype-name="${typeName}"][data-is-check-all="false"]`);
            groupItems.forEach(item => item.checked = checkbox.checked);
            // 更新按钮文本
            checkbox.nextSibling.textContent = checkbox.checked ? '取消全选' : '全选';
        } else {
            // 点击普通项，判断分组是否全选，更新全选按钮状态
            const groupItems = document.querySelectorAll(`[data-subtype-name="${typeName}"][data-is-check-all="false"]`);
            const allChecked = Array.from(groupItems).every(item => item.checked);
            const checkAllBtn = document.querySelector(`[data-subtype-name="${typeName}"][data-is-check-all="true"]`);
            
            if (checkAllBtn) {
                checkAllBtn.checked = allChecked;
                checkAllBtn.nextSibling.textContent = allChecked ? '取消全选' : '全选';
            }
        }
    });
}

代码说明 #

• 数据分组：用对象groupedData将原数据按子类型名称归类，方便后续处理每个分组
• 插入控制项：给每个分组创建一个带有标记的全选控制项，确保它能和普通数据项区分开，再将控制项和分组项合并到最终列表
• 状态监听：通过事件监听处理复选框的点击逻辑，实现全选/取消全选的状态同步和文本切换

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