最快清空 select 的方法是 select.innerHTML = ''，但会丢失选中状态、事件监听器和自定义属性；推荐 select.options.length = 0，性能更优且保留元素属性，但需手动重置 value 和 selectedIndex。
直接设 select.innerHTML = '' 最快但有副作用
这行代码能瞬间清空所有 <option>，兼容性好、写起来省事。但它会把当前选中状态、事件监听器、甚至自定义属性（比如 data-id）一并抹掉——如果后续还要动态加选项或依赖选中值做逻辑判断，就容易出错。
常见错误现象：select.value 在清空后仍返回旧值（DOM 已删，但 JS 变量没同步），导致后续 fetch 请求传错参数。
- 适合场景：一次性清空 + 紧接着重新填充完整列表
- 不推荐用于“清空后用户可能手动再选”的交互流程
- 若需保留默认占位项，别用
innerHTML = ''，改用while (select.firstChild) select.removeChild(select.firstChild)后再appendChild(defaultOption)
select.options.length = 0 更轻量且不丢状态引用
这是清空 <select> 的底层方式，只清 DOM 子节点，不碰元素自身属性。比 innerHTML 少一次 HTML 解析，性能略优，尤其在大量选项时更稳。
容易踩的坑：清空后 select.value 不自动变为空字符串，仍保持原值；select.selectedIndex 会变成 -1，但如果你靠 value 判断是否已选，就得手动补一句 select.value = ''。
立即学习“前端免费学习笔记（深入）”；
- 对
type="select-one"和type="select-multiple"都生效 - 不会触发
change事件，适合静默清理 - 和
select.remove(index)比，避免索引偏移问题，不用倒序遍历
清空后要不要重置选中状态？看 type 类型
select-one 下，清空后用户再点下拉会看到空白，体验差。建议清空后立刻设 select.selectedIndex = -1（表示无选中）或插入一个空 <option value="">请选择</option> 并设为默认。
select-multiple 更麻烦：仅设 selectedIndex = -1 不起作用，得遍历所有 option 并设 selected = false。
- 安全写法：
Array.from(select.options).forEach(opt => opt.selected = false) - 别用
select.value = ''清多选框——它只影响第一个匹配 value 的 option，其余不动 - 移动端 Safari 对
selectedIndex = -1支持稳定，但对selected = false在某些版本里有渲染延迟
批量清空多个下拉框时，别漏掉 disabled 字段
有些表单字段初始是 disabled（比如级联菜单的二级下拉），清空逻辑里如果跳过它们，下次展开时可能残留旧选项；但如果直接操作 select.innerHTML = ''，又会导致 disabled 状态丢失（DOM 节点重建后 disabled 属性没了）。
真正要做的，是先保留 disabled 状态，再清内容，最后恢复：
const wasDisabled = select.disabled; select.disabled = false;- 执行
select.options.length = 0或其他清空方式 select.disabled = wasDisabled- 对 iOS Safari，还得加
select.style.pointerEvents = wasDisabled ? 'none' : 'auto'才算真正禁用
复杂点在于：清空动作本身不该触发 change，但如果你在 change 里绑了请求逻辑，又没做防抖或取消机制，清空过程可能误发请求。最稳妥的是清空前解绑，清空后再重绑，或者用标记位临时屏蔽 handler。
