Tom-Select 中实现 option group 的字母序排序（升序）

Tom-Select 默认不按 optgroup 标签排序，需通过 optgroupValueField 显式指定分组标识字段，并在 sortField 中优先按 "optgroup" 字段升序排序，才能实现分组整体有序排列。

tom-select 默认不按 optgroup 标签排序，需通过 `optgroupvaluefield` 显式指定分组标识字段，并在 `sortfield` 中优先按 `"optgroup"` 字段升序排序，才能实现分组整体有序排列。

在 Tom-Select 中，optgroupOrder 和 optgroupSorter 仅影响渲染时的分组顺序逻辑，但实际生效前提是 Tom-Select 能正确识别并提取每个 <option> 所属的 optgroup 值。默认情况下，Tom-Select 使用 DOM 中 <optgroup> 元素的插入顺序（即 $order）作为分组依据，而非其 label 属性——这正是导致分组“不排序”的根本原因。

要真正实现按 label 升序排列分组（如 "Active" 排在 "Inactive" 之前），必须完成两个关键配置：

1. 启用 label 作为分组值字段：设置 optgroupValueField: "label"，强制 Tom-Select 将 <optgroup label="Active"> 的 label 值（即 "Active"）作为该组内所有选项的 optgroup 属性值；
2. 在排序规则中优先按 optgroup 排序：将 sortField 设为数组形式，首项按 optgroup 升序，次项按 text 升序，确保“先分组、后组内排序”。

正确配置示例：

new TomSelect("#cursel", {  create: false,  placeholder: "currency",  optgroupValueField: "label", // 关键：让选项携带其 optgroup.label 值  sortField: [    { field: "optgroup", direction: "asc" }, // 先按分组标签升序    { field: "text",     direction: "asc" }  // 再按选项文字升序  ],  plugins: ["checkbox_options", "clear_button"]});

注意事项：

1. optgroupOrder 和 optgroupSorter 在标准 HTML <select> 初始化场景下通常无效，因其依赖于 Tom-Select 的内部数据结构（如从远程加载或动态构建时才起作用）；
2. 不要混用 optgroupValueField 与 optgroupLabelField：后者仅控制下拉菜单中分组标题的显示文本，不影响排序逻辑；
3. 若 optgroup 标签含空格或特殊字符，建议确保其 label 值符合 Unicode 排序预期（localeCompare() 已内置处理，无需额外干预）；
4. Tom-Select v2.2+ 支持多级 sortField 数组，旧版本需升级以保障功能可用。

通过以上配置，示例中 <optgroup label="Active"> 与 <optgroup label="Inactive"> 将严格按字母序排列（"Active" < "Inactive"），且各组内选项（如 "BGN", "EUR"）也保持升序，最终呈现清晰、可控的层级化选择体验。