HTML中通过在标签添加selected布尔属性可设置默认选中项，仅需写selected无需赋值，且同一中只能有一个，否则仅首个生效。
直接在目标 <option></option> 上加 selected 属性就能生效，但前提是没被 JS 或框架覆盖——这是最常被忽略的前提。
HTML 原生写法：只用 selected，别赋值
浏览器只认 selected 这个布尔属性本身，写成 selected="true" 或 selected="selected" 都是冗余的，虽然不报错，但语义不清、易被误读。
- 必须确保只有一个
<option selected></option>，多个时浏览器只选第一个，但 DOM 结构已不合法 -
selected不能和disabled同时出现在同一个<option></option>上，否则视觉上不会高亮，且表单提交时该值不可用 - 如果想设“请选择”为初始项，推荐用：
<option value="" disabled hidden selected>请选择</option>——hidden防止它出现在下拉展开列表中，disabled阻止用户选中它
JavaScript 动态设置：select.value vs select.selectedIndex
两者都能改，但行为不同。用 value 更安全，除非你确定 value 值严格匹配（包括空格、大小写、类型）；用索引快但脆弱，选项顺序一变就失效。
-
select.value = "us"：自动滚动到对应项并高亮，但若没找到匹配的value，select.value会变成空字符串，界面无变化 -
select.selectedIndex = 2：按位置强制选中，哪怕第 2 个<option></option>的value是空或非法，也会被选中 - 务必确认
<select></select>已挂载到 DOM，否则赋值无效；常见于脚本放在里，或在document.createElement后立即操作 - 如需触发监听函数（比如表单校验），得手动派发事件：
select.dispatchEvent(new Event('change', { bubbles: true }))
React 中默认值不显示？检查 value prop 是否严格匹配
React 的 <select></select> 是受控组件，selected 属性完全被忽略。它的显示状态 100% 由 value prop 决定，而这个值必须等于某个 <option value="xxx"></option> 的字符串值。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 初始化
useState时，不能设成''或undefined，除非 options 里真有value=""的项 - 异步加载 options 时，不要先渲染
<select value="{value}"></select>，而 options 还是空数组——这会导致 React 渲染一个“无选项可匹配”的受控组件，表现为下拉框空白 - 用
v-if（Vue）或{options.length > 0 && (...)}（React）控制 select 渲染时机，比靠 state 默认值更可靠 - 调试技巧：
console.log(selectElement.value)看真实值，再比对options.map(o => o.value)，能快速定位类型或空格问题
为什么 HTML 里的 selected 突然不生效？大概率被 JS 覆盖了
浏览器只在初始 HTML 解析阶段读取 selected 属性；一旦后续 JS 执行了 select.value = ... 或 select.selectedIndex = ...，原生属性就被覆盖，且不会回写到 DOM。
- Vue 的
v-model、React 的value、甚至 jQuery 的.val()都属于这类覆盖行为 - 常见陷阱：后端模板渲染时写了
selected，但前端框架初始化又立刻 set 了一次 state，结果白写了 - 解决方案：纯静态表单就只用
selected；动态场景一律放弃 HTML 属性，统一用 JS 控制，避免双源事实 - 检查方法：在 DevTools 里右键
<option></option>→ “Edit as HTML”，看selected是否还在；如果不在，说明已被 JS 移除
真正容易出问题的不是怎么设，而是设完之后谁在改——尤其在混合使用服务端渲染 + 客户端框架的项目里，selected 属性和 JS 状态之间的竞争关系，往往要靠打断点+DOM 快照才能厘清。
