select 的 selected 属性只在 <option> 标签上生效，用于设置原生下拉框默认值；写在 <select> 上无效，JS 动态设置需同步更新 select.value，框架中须确保绑定值与 option.value 严格相等。
select 的 selected 属性为什么没生效
HTML 原生下拉框默认值只认 selected 属性，且必须写在 <option> 标签上，不是 <select> 上。浏览器解析 HTML 时就按这个属性建立初始选中状态，JS 后续赋值不会影响它。
常见错误包括：
- 把
selected写在<select>标签里，比如<select selected>—— 完全无效 - 多个
<option selected>，浏览器只取第一个，其余被忽略 - 用 JS 设置
option.selected = true但没同步设select.value，某些浏览器（尤其旧版 Safari）不触发视觉更新 - 服务端模板插值未转义，比如
value="{{ user.role }}"中的双引号导致标签提前截断，selected实际没被解析
React/Vue/Angular 中 value 不匹配导致空白
框架里 <select value={xxx}> 或 v-model 是受控组件，完全无视 HTML 的 selected。如果绑定值和 <option value="...> 不严格相等（类型+值），就会显示为空白。
典型场景与对策：
立即学习“前端免费学习笔记（深入）”；
- 后端返回数字
1，但<option value="1">是字符串 → React 中 useState 必须用useState('1')，不能用useState(1) - Vue 中
v-for渲染<option :value="item">，item 是对象，但v-model是字符串 ID → 改成:value="item.id" - Angular 模板驱动表单中多个
<select name="xxx">共用相同name→ Angular 只保留最后一个绑定，其余默认值丢失；应改用动态 name，如[name]="'select_' + i" - 调试方法：控制台运行
document.querySelector('select').value看浏览器实际值，再对比框架 state，不一致说明绑定链断裂
异步加载 options 后默认值不显示
options 还没渲染完，v-model 或 value 就已绑定，此时没有匹配项，自然无法选中。
安全做法：
- Vue：用
v-if="options.length > 0"包裹整个<select>，避免空数组时提前绑定 - React：在
options加载完成前，不要传value，或传undefined配合defaultValue回退 - 原生 JS 动态插入 option 后，必须显式设置
select.value = 'targetValue'，不能只设option.selected = true - Google Apps Script 场景：务必先插入空占位项（
value=""），再追加数据项，否则首次渲染无默认
form.reset() 后默认值变空，不是 bug 是机制
form.reset() 只还原 HTML 初始属性值（value、checked、selected），不认 JS 设置的值。你用 JS 改过 input.value 或 select.value，reset 就会回到 HTML 里写的那个“原始值”，而不是你 JS 设的“业务默认值”。
要让 reset 真正回到你想要的状态：
- 文本框/数字框：初始化时设
input.defaultValue = '初始内容' - 下拉框：对目标
<option>设option.defaultSelected = true（注意不是select.defaultSelected） - 禁用 reset 依赖：直接手动重置，比如
select.value = initialState.value，更可控 - 特别注意：
<input type="file">安全限制，reset()完全无效，必须手动清空el.value = ''
最易被忽略的一点：所有这些“初始值”必须在 DOM 加载完成、JS 执行前就存在于 HTML 中，或者由 JS 在 DOM ready 后立即写入 defaultValue/defaultSelected —— 晚一步，reset 就找不到依据。
