在 HTML5 中，设置 <select> 默认选中项需在目标 <option> 标签中添加 selected 布尔属性（仅写 selected 即可），浏览器据此渲染初始选中状态；同一 <select> 中只能有一个 selected，多个时仅首个生效，且该属性与 value 匹配无关，也不受 JavaScript 动态赋值影响。
select 元素如何设置默认选中项
HTML 下拉菜单（<select>）的默认选中项，靠的是 selected 属性，而不是 value 匹配或 JS 赋值。浏览器只认这个布尔属性是否存在于某个 <option> 上，一旦存在，就渲染为默认选中 —— 与 value 值无关，也和表单提交时的值无直接绑定关系。
常见错误是写成 selected="true" 或 selected="selected"，其实只需 selected 即可；更隐蔽的问题是多个 <option> 都写了 selected，此时浏览器只取第一个生效。
-
<option value="apple">Apple</option>→ 不选中 -
<option value="banana" selected>Banana</option>→ 选中（推荐写法） -
<option value="cherry" selected="selected">Cherry</option>→ 也能工作，但冗余 - 两个
selected同时出现 → 只有第一个被尊重
动态生成下拉菜单时怎么确保默认项正确
服务端模板（如 PHP、Django、Jinja）或前端 JS 拼接 HTML 时，容易因逻辑分支漏掉 selected，或在循环中错误地给所有项都加了该属性。
关键判断点：不是“哪个值等于当前数据”，而是“哪个 <option> 应该带 selected 属性”。建议把判断逻辑抽离出来，避免嵌套混乱。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- PHP 示例：
<option value="<?php echo $v; ?>" <?php if ($v === $default_value) echo 'selected'; ?>><?php echo $label; ?></option> - JS 拼字符串时，用三元运算明确控制：
`<option value="${val}" ${val === defaultVal ? 'selected' : ''}>${label}</option>` - 若用
document.createElement('option')动态添加，记得手动设option.selected = true，而非仅设option.setAttribute('selected', '')（后者兼容性略差）
用 JavaScript 修改默认选中项的注意事项
运行时修改默认项，本质是修改 <select> 的 value 或 selectedIndex，而不是操作 selected 属性 —— 后者只影响初始渲染，不响应式更新 UI。
-
select.value = 'new-value'→ 会自动匹配对应<option value="...">并选中它（如果存在） -
select.selectedIndex = 2→ 直接按索引选中第 3 个选项（从 0 开始） -
option.selected = true→ 可行，但必须配合select.options[index].selected = true，且要确保该option已挂载到 DOM 中 - 注意：如果新
value在当前<select>中不存在，select.value会被设为空字符串，但 UI 不变（不会清空选中）
React/Vue 等框架里为什么 selected 属性失效
框架会接管表单控件的受控行为，直接写 selected 属性会被忽略 —— 因为框架用 value（React）或 v-model（Vue）驱动 UI，DOM 属性只是快照。
- React 中：删掉所有
selected，只靠<select value={currentValue}>和<option value="x">的 value 匹配来决定选中 - Vue 中：
<select v-model="selectedValue">，同样依赖value字段匹配，selected无意义 - 混用场景（比如 SSR + hydration）：服务端输出的
selected仅用于首屏渲染，hydration 后由框架状态接管；若服务端和客户端初始值不一致，可能触发 warning 或 UI 闪烁
真正需要关注的，是那个“谁来决定当前选中值”的控制权归属 —— 是 HTML 原生属性，还是框架状态变量。两者不能并存，否则必然冲突。
