推荐用 length = 0 清空 options 集合，即 select.options.length = 0；它最轻量安全，不触发重排、不丢失事件监听器和 data- 属性，现代浏览器及 IE9+ 支持，IE8 需倒序 removeChild 降级。
直接赋空字符串给 innerHTML 最快但有隐患
很多开发者第一反应是 selectElement.innerHTML = ''，确实能清空所有 ，但会丢失 select 元素上已绑定的事件监听器（比如用 addEventListener 绑定的 change），因为整个 DOM 子树被重建了。
- 适用于简单场景：没手动绑定事件、也不依赖
option的data-属性或引用 - 不适用于 Vue/React 等框架内联渲染的下拉框，可能破坏响应式更新逻辑
- IE8+ 都支持，兼容性好
推荐用 length = 0 清空 options 集合
HTMLSelectElement.options 是一个实时的 HTMLOptionsCollection，修改其 length 属性是最轻量、最安全的清空方式，不会触发重排，也不会丢失事件监听器。
const select = document.getElementById('mySelect');
select.options.length = 0;
- 保留所有已绑定的事件监听器和元素属性
- 比循环调用
removeChild()更高效（底层直接截断集合） - 所有现代浏览器及 IE9+ 均支持；IE8 不支持该写法，需降级处理
兼容 IE8 的稳妥写法：倒序遍历 removeChild
IE8 不支持直接设 options.length，此时必须手动移除每个 option。注意必须倒序（从末尾往前），否则移除后索引前移，会跳过相邻项。
const select = document.getElementById('mySelect');
while (select.options.length > 0) {
select.removeChild(select.options[0]);
}
- 正序写法
for (let i = 0; i 会漏删——每次removeChild后length减 1，i却继续加 1 - 用
while循环更直观，避免索引计算错误 - 如果项目已放弃 IE8，这条可跳过
清空后要不要重置 selectedIndex？
清空 options 后，selectedIndex 会自动变为 -1（表示无选中项），但某些老版本 Safari 或自定义 polyfill 可能不触发该行为。显式重置更可靠：
立即学习“前端免费学习笔记（深入）”；
const select = document.getElementById('mySelect');
select.options.length = 0;
select.selectedIndex = -1;
-
selectedIndex = -1是标准写法，确保视觉上“无选项被高亮” - 若后续要插入新
option并默认选中第一个，可设selectedIndex = 0（但需确认插入已完成） - 这个细节常被忽略，尤其在动态加载选项后未重置导致 UI 显示异常
selectedIndex 状态同步上。别只盯着“能不能清空”，得看“清完之后它还 behaving 正常吗”。 
