select 元素不会被 form.reset() 清空成空白，因其设计为恢复初始 selected 状态而非置空；单选应设 selectedindex = -1，多选需遍历 options 设 selected = false，且须在 onreset 事件中操作以确保 dom 同步。
select 元素不会被 form.reset() 清空成空白？原因在这里
不是 bug，是设计行为。form.reset() 对 <select></select> 的处理逻辑是：恢复到页面加载时的 selected 属性状态，而不是设为未选中。如果 HTML 中没写 selected，浏览器可能默认选中第一个 <option></option>，重置后就「卡」在那了——看起来像没清空。
手动清空 select 的三种可靠写法（单选/多选都要覆盖）
别只设 value = ""，它对多选无效；也别直接删 innerHTML，会破坏事件绑定或第三方库状态。推荐以下方式：
- 单选
<select></select>：设element.selectedIndex = -1（最稳妥），或element.value = ""（仅当存在空值<option value=""></option>时才生效） - 多选
<select multiple></select>：必须遍历所有option，逐个设option.selected = false - 通用兜底：用
element.innerHTML = ""前先保存结构，否则富文本编辑器或动态渲染组件可能出错
reset 按钮点击后同步清空 select 的正确时机
不能在 click 事件里直接操作——此时原生重置还没完成，DOM 状态可能不一致。要用表单的 onreset 事件，它在浏览器完成默认重置动作之后触发：
document.getElementById('myForm').onreset = function () {
const selects = this.querySelectorAll('select');
selects.forEach(select => {
if (select.multiple) {
Array.from(select.options).forEach(opt => opt.selected = false);
} else {
select.selectedIndex = -1;
}
});
};
注意：onreset 不会冒泡，也不触发 submit 类事件，适合做清理收尾。
为什么用 FormData 判断 select 是否清空会失败
new FormData(form) 只收集当前有值且可提交的字段，select 如果没设 name 或当前无选中项，它根本不会出现在结果里——你拿到的是空对象，不代表 DOM 已清空。真正验证方式只有读属性：
- 单选：检查
select.selectedIndex === -1或select.value === "" - 多选：检查
Array.from(select.selectedOptions).length === 0 - 别信
select.value在多选场景下的返回值，它只返回第一个选中项
复杂点在于：Shadow DOM 里的 select、被 disabled 的控件、或者用了 contenteditable 模拟下拉的自定义组件，这些都不在 form.elements 或 querySelectorAll 默认范围内，得单独处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
