在使用 tom select 时，若希望控件初始化后显示为空（而非默认选中首个选项），需确保 html `
Tom Select 默认会将 <select> 元素中第一个 <option> 作为初始选中项（即使其无 value 属性），这常导致“未选择”状态无法正确呈现。要实现真正“空初始化”，核心在于HTML 结构 + 初始化配置的协同配合。
✅ 推荐方案：声明式空选项（最佳实践）
在原始 <select> 中显式添加一个 value="" 的占位 <option>，其文本应与 placeholder 属性一致，且置于首位：
<select id="ex-dropdown-input" autocomplete="off" placeholder="How cool is this?"> <option value="">How cool is this?</option> <option value="amazing">amazing</option> <option value="awesome">awesome</option> <option value="cool">cool</option> <!-- 其他选项... --> </select>
对应 JavaScript 初始化时，无需设置 allowEmptyOption: true（该选项已弃用且无效），仅需基础配置即可：
const select = new TomSelect('#ex-dropdown-input', {
plugins: ['dropdown_input', 'remove_button'],
// 注意：不要写 allowEmptyOption: true
});✅ 优势：
- 符合语义化 HTML 和无障碍标准（ARIA 兼容）；
- 表单提交时该字段值为 ""，便于后端统一判空；
- 初始化、重置、验证逻辑天然一致；
- 无需额外 JS 操作，避免竞态风险。
⚠️ 备选方案：运行时调用 clear()
若因历史原因无法修改 HTML 结构，可在初始化后立即调用 clear() 方法：
const select = new TomSelect('#ex-dropdown-input', {
plugins: ['dropdown_input', 'remove_button'],
});
select.clear(); // 立即清空初始选中项⚠️ 注意事项：
- 必须在 new TomSelect(...) 实例创建之后调用，否则报错；
- 若页面存在动态加载或表单回填逻辑，需额外判断 select.items.length > 0 再执行 clear()，否则可能误清用户已有选择；
- 不适用于服务器端渲染（SSR）场景中需服务端同步状态的场景。
? 补充建议
- 始终为每个 <option> 显式指定 value 属性，避免依赖文本内容作为值（尤其含空格/特殊字符时）；
- 如需支持用户创建新选项，启用 create: true 并配合 createFilter 提升体验；
- 使用 placeholder 属性仅影响 UI 提示，不替代空选项的语义功能。
遵循上述方式，即可确保 Tom Select 在任何环境（包括首次加载、SPA 路由切换、表单重置）中均稳定呈现“未选择”状态，兼顾功能健壮性与开发可维护性。
