tom select 默认会自动选中 `
在使用 Tom Select 时，一个常见需求是：下拉框加载后不默认选中任何选项，而是呈现“未选择”状态（例如显示 placeholder 提示文字），尤其在用于搜索、筛选或自定义渲染的场景中。但默认情况下，Tom Select 会将原始
✅ 推荐方案：声明式空选项（语义清晰、兼容性好）
核心做法是在 HTML 中显式添加一个 value="" 的占位选项，并使其文本与 placeholder 属性一致：
<select id="ex-dropdown-input" autocomplete="off" placeholder="How cool is this?"> <option value="">How cool is this?</option> <!-- 关键：空 value + 匹配 placeholder --> <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', {
create: true, // 支持创建新选项（如需）
plugins: ['dropdown_input', 'remove_button'],
});✅ 优势：符合 HTML 表单规范；服务端可直接接收空字符串 "" 作为“未选择”标识；支持无障碍访问（screen reader 正确播报 placeholder）；无需额外 JS 逻辑干预生命周期。
⚠️ 备选方案：运行时清空（需谨慎使用）
若因历史原因无法修改 HTML 结构，可通过实例方法 clear() 强制清空：
const select = new TomSelect('#ex-dropdown-input', {
create: true,
plugins: ['dropdown_input', 'remove_button'],
});
select.clear(); // 在初始化后立即调用⚠️ 注意事项：
- 必须确保 select 实例已完全初始化完成后再调用 clear()（推荐放在构造函数之后的同步位置）；
- 若表单支持编辑已有数据，需在加载前判断原始
- 该方式绕过原生语义，可能导致部分表单验证库或 SSR 渲染异常。
? 总结建议
| 方案 | 可靠性 | 语义性 | 维护成本 | 推荐度 |
|---|---|---|---|---|
| 空 value 占位选项（HTML 层） | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ | ✅ 强烈推荐 |
| select.clear()（JS 层） | ⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐ | ❌ 仅作临时补救 |
始终优先通过 HTML 结构表达意图：一个真正“可为空”的选择器，其原始
