tom select 默认会自动选中第一个 `
在使用 Tom Select 为原生 <select> 元素增强功能（如自定义渲染、搜索、标签删除等）时，一个常见需求是：页面加载后下拉框应处于“未选择”状态，显示 placeholder 文本而非默认选中首个选项。但默认行为会将 DOM 中第一个 <option> 视为初始值，导致用户体验不符预期。
✅ 推荐方案：声明式空选项（语义清晰、兼容性强）
核心要点：
- 在 <select> 中显式添加一个 value="" 的 <option>，其文本内容应与 placeholder 属性一致；
- 移除 allowEmptyOption: true 配置（该选项实际用于支持创建新选项，与空选无关，且可能干扰初始化逻辑）；
- 确保所有其他 <option> 均带有明确的 value 属性（避免浏览器回退到 textContent 作为 value）。
<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> <option value="excellent">excellent</option> <option value="great">great</option> <option value="neat">neat</option> <option value="superb">superb</option> <option value="wonderful">wonderful</option> </select>
const select = new TomSelect('#ex-dropdown-input', {
plugins: ['dropdown_input', 'remove_button'],
// ❌ 不要写 allowEmptyOption: true
// ✅ 可按需启用 create: true（允许用户输入并创建新选项）
});? 原理说明：Tom Select 初始化时会读取原生 <select> 的 value。当首个 <option value=""> 被设为默认选中项（即 selected 属性未显式设置，但 value 为空字符串），Tom Select 将其识别为“未选择”状态，并正确渲染 placeholder。
⚠️ 备选方案：运行时调用 clear()（不推荐用于初始化）
若因历史原因无法修改 HTML 结构，可手动清空：
const select = new TomSelect('#ex-dropdown-input', {
plugins: ['dropdown_input', 'remove_button']
});
// 立即清空初始选中项（需确保 DOM 已就绪）
select.clear();⚠️ 注意事项：
- 必须在 Tom Select 实例创建之后立即调用 clear()，否则可能被后续初始化逻辑覆盖；
- 若表单支持编辑已有数据（如回填场景），需额外判断原始 <select> 是否已有选中项，避免误清有效值；
- 此方式破坏了 HTML 表单的语义完整性，不利于无障碍访问（screen reader）和 SSR 渲染一致性。
? 总结
| 方案 | 是否推荐 | 关键要求 | 维护性 |
|---|---|---|---|
| 添加 <option value="">Placeholder</option> | ✅ 强烈推荐 | HTML 层面声明空状态，配置简洁 | 高（一次配置，长期稳定） |
| select.clear() 运行时清空 | ❌ 不推荐 | 需 JS 控制时机，易出竞态 | 低（需额外状态管理） |
始终优先通过语义化 HTML 定义初始状态——这不仅是 Tom Select 的最佳实践，更是现代 Web 表单开发的通用准则。
