Tom Select中optgroup（选项组）排序功能失效问题求助

问题概述 #

使用Tom Select时，配置了选项组排序相关参数，但选项组始终无法按预期的字母升序排列，仅选项能正常排序。

原因分析 #

1. 直接通过DOM元素初始化Tom Select时，组件默认保留原DOM中optgroup的顺序，optgroupSorter参数仅对远程数据源或动态添加的optgroup生效，对已有DOM的初始化场景不起作用。
2. optgroupOrder是指定固定顺序的数组，用于强制按预设顺序排列optgroup，并非动态排序的配置，无法实现字母升序的动态排序需求。

解决方法 #

手动提取DOM中的optgroup和option数据，对optgroup进行排序后，再传入Tom Select进行初始化。具体步骤如下：

1. 从目标select元素中提取所有optgroup及其子option的数据。
2. 对提取的optgroup数组按label字段进行字母升序排序。
3. 将排序后的optgroups数据传入Tom Select的初始化配置中。

修正后的代码示例 #

JS代码 #

$(document).ready(function () {
    // 统一处理select元素的optgroup提取与排序
    const processSelect = ($selectEl) => {
        const optgroups = [];
        $selectEl.find('optgroup').each(function() {
            const label = $(this).attr('label');
            const options = [];
            $(this).find('option').each(function() {
                options.push({
                    value: $(this).val(),
                    text: $(this).text()
                });
            });
            optgroups.push({
                label: label,
                options: options
            });
        });
        // 按optgroup label字母升序排序
        return optgroups.sort((a, b) => a.label.localeCompare(b.label));
    };

    // 初始化第一个选择框
    var selectCurrency = new TomSelect("#cursel", {
        create: false,
        placeholder: "currency",
        optgroupLabelField: 'label',
        optgroupValueField: 'label',
        optgroups: processSelect($('#cursel')),
        sortField: {
            field: "text",
            direction: "asc"
        },
        plugins: ["checkbox_options", "clear_button"]
    });

    // 初始化第二个选择框
    var selectAlt = new TomSelect("#curselalt", {
        create: false,
        placeholder: "alt",
        optgroupLabelField: 'label',
        optgroupValueField: 'label',
        optgroups: processSelect($('#curselalt')),
        sortField: {
            field: "text",
            direction: "asc"
        },
        plugins: ["checkbox_options", "clear_button"]
    });
});

HTML代码（保持不变） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.2.2/js/tom-select.complete.js"></script>
<select id="cursel" multiple>
    <optgroup label="Inactive">
        <option>AED</option>
        <option>BAM</option>
    </optgroup>
    <optgroup label="Active">
        <option>EUR</option>
        <option>BGN</option>
    </optgroup>
</select>

<select id="curselalt" multiple>
    <optgroup label="Inactive">
        <option>AED</option>
        <option>BAM</option>
    </optgroup>
    <optgroup label="Active">
        <option>EUR</option>
        <option>BGN</option>
    </optgroup>
</select>

说明 #

• 通过processSelect函数统一处理数据提取和排序逻辑，减少代码重复。
• 显式指定optgroupValueField为label，确保Tom Select正确识别optgroup的标识字段，提升代码可读性。
• 排序后的optgroups数据传入初始化配置后，Tom Select会按排序后的顺序渲染选项组，同时选项仍保持sortField配置的升序排列。

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