如何更新tom-select以同步底层HTML select元素的变更？

直接操作原生<select>添加选项并设置选中后，TomSelect组件无法同步状态，核心原因是组件维护了独立的内部状态，原生DOM的变更不会自动触发组件的状态更新——哪怕调用sync也可能因时机或方式不对失效。

正确处理方式（优先用组件API） #

不要直接修改原生DOM，改用TomSelect自带的API来添加选项并设置选中，确保组件内部状态和DOM同步：

// 假设已初始化TomSelect实例
const tomSelect = new TomSelect('#your-select-id');

// 定义新选项
const newOption = { value: 'custom-value', text: '自定义选项' };

// 添加选项到组件
tomSelect.addOption(newOption);
// 设置该选项为选中状态
tomSelect.setValue(newOption.value);
// 可选：强制刷新组件显示
tomSelect.refresh();

若必须操作原生DOM的兼容方案 #

如果业务逻辑要求先修改原生<select>，需要确保DOM变更完成后，调用组件的sync和refresh方法同步状态：

// 获取原生select元素
const selectEl = document.querySelector('#your-select-id');
// 创建并添加新选项
const option = document.createElement('option');
option.value = 'custom-value';
option.textContent = '自定义选项';
option.selected = true;
selectEl.appendChild(option);

// 同步TomSelect组件状态
tomSelect.sync();
tomSelect.refresh();

之前尝试的setValue无效，是因为调用时组件内部还没有该选项的记录；clear + addItem组合可能因步骤衔接问题没触发正确的状态更新。优先使用组件API能从根源避免这类同步问题。

内容的提问来源于stack exchange，提问作者Bartosz Domżalski