
在使用 tom select 时,若希望控件初始化后显示为空(而非默认选中首个选项),需确保 html `
Tom Select 默认会将
✅ 推荐方案:声明式空选项(最佳实践)
在原始
对应 JavaScript 初始化时,无需设置 allowEmptyOption: true(该选项已弃用且无效),仅需基础配置即可:
const select = new TomSelect('#ex-dropdown-input', {
plugins: ['dropdown_input', 'remove_button'],
// 注意:不要写 allowEmptyOption: true
});✅ 优势:
⚠️ 备选方案:运行时调用 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)场景中需服务端同步状态的场景。
? 补充建议
- 始终为每个
- 如需支持用户创建新选项,启用 create: true 并配合 createFilter 提升体验;
- 使用 placeholder 属性仅影响 UI 提示,不替代空选项的语义功能。
遵循上述方式,即可确保 Tom Select 在任何环境(包括首次加载、SPA 路由切换、表单重置)中均稳定呈现“未选择”状态,兼顾功能健壮性与开发可维护性。










