Tom Select 初始化时保持下拉框为空的正确方法

在使用 tom select 时，若希望控件初始化后显示为空（而非默认选中首个选项），需确保 html `` 中包含一个 `value=""` 的占位选项，并移除 `allowemptyoption: true` 配置；也可通过 `select.clear()` 手动清空，但推荐前者以保证状态一致性与可访问性。

Tom Select 默认会将 元素中第一个 作为初始选中项（即使其无 value 属性），这常导致“未选择”状态无法正确呈现。要实现真正“空初始化”，核心在于HTML 结构 + 初始化配置的协同配合。

✅ 推荐方案：声明式空选项（最佳实践）

在原始 中显式添加一个 value="" 的占位 ，其文本应与 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
});

✅ 优势：

What-the-Diff

检查请求差异，自动生成更改描述

下载

• 符合语义化 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）场景中需服务端同步状态的场景。

? 补充建议

• 始终为每个 显式指定 value 属性，避免依赖文本内容作为值（尤其含空格/特殊字符时）；
• 如需支持用户创建新选项，启用 create: true 并配合 createFilter 提升体验；
• 使用 placeholder 属性仅影响 UI 提示，不替代空选项的语义功能。

遵循上述方式，即可确保 Tom Select 在任何环境（包括首次加载、SPA 路由切换、表单重置）中均稳定呈现“未选择”状态，兼顾功能健壮性与开发可维护性。