selected属性仅在HTML初始加载时生效，JS后续赋值会覆盖；Vue中v-model完全忽略selected，需确保绑定变量有正确初始值；React受控组件value必须严格匹配option值。
select 元素里 selected 属性不生效？检查是否被 JS 覆盖了
浏览器渲染时，selected 属性只在初始 HTML 加载时起作用；如果后续 JS 执行了 select.value = 'xxx' 或 select.selectedIndex = n，会直接覆盖默认选中状态。常见于 Vue/React 初始化后调用 setState 或 mounted 里赋值，导致 HTML 里的 selected 形同虚设。
实操建议：
- 纯静态表单：直接在
<option></option>上写selected，且确保只有一个<option selected></option> - 动态场景（如从接口取数据后设默认值）：别依赖 HTML 属性，改用 JS 显式设置
select.value或select.options[index].selected = true - 调试时可临时在控制台运行
document.querySelector('select').value，确认当前真实值是否符合预期
Vue 中 v-model 绑定 select 默认值失效？初始化顺序是关键
v-model 会接管 select 的值，此时 HTML 的 selected 属性完全被忽略。默认值必须由绑定的 data 变量决定，且该变量需在组件创建时就存在、有明确初始值。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- data 里定义
selectedValue: ''，但 options 是异步加载的，导致首次渲染时没匹配项，下拉框空白 - options 数组为空时就绑定了
v-model，Vue 不会报错，但无法自动选中后续加入的首项 - 用
v-for渲染<option></option>时，:value类型和v-model值类型不一致（比如字符串 vs 数字），导致匹配失败
实操建议：
- 确保
v-model绑定的变量初始值，与 options 中某项的value完全相等（包括类型） - 若 options 异步加载，把
v-model变量初始化为null或undefined，等数据到达后再赋值，避免空匹配 - 必要时用
v-if="options.length"控制 select 渲染时机
React 使用 useState 设置 select 默认值，为什么第一次渲染总是空？
React 中 select 是受控组件，其显示值完全由 value prop 决定。如果 state 初始化为 ''，而 options 第一项的 value 是 '1'，那下拉框就会显示为空白（不是第一项被选中）。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
使用场景：
- 编辑表单回显：默认值应来自接口返回的数据，而非硬编码
- 新建表单：需提前知道“无选项”对应哪个合法 value（比如
null、''或'-'），并在 options 中显式包含
实操建议：
- state 初始值必须严格等于某个
<option value="..."></option>的值，否则浏览器无法高亮任何选项 - 避免用
useEffect在挂载后才设置 state —— 首次渲染已发生，用户会看到闪动或空白 - 如果 options 尚未加载，可先 render 一个 disabled 的 select + loading 文案，而不是空下拉框
HTML 原生写法：selected 和 value 同时出现，谁说了算？
原生 HTML 中，selected 属性优先级高于 value 属性（value 是 <input> 的属性，对 <select></select> 无效）。真正起作用的是 <option selected></option>，以及 <select></select> 自身的 value 属性（仅用于表单提交时的默认值，不影响 UI 选中）。
容易踩的坑：
- 误写
<select value="2"></select>—— 这个value属性浏览器根本不识别，毫无作用 - 多个
<option selected></option>并存 —— 浏览器只认第一个，其余被忽略，但控制台不会报错 - option 没写
value，只靠 innerText 匹配 —— 提交时 value 是文本内容，容易因空格、换行导致后端解析失败
实操建议：
- 始终为每个
<option></option>显式设置value，哪怕和显示文本一样 - 确保只有一个
<option selected></option>，且它出现在所有<option></option>中靠前位置 - 表单提交前用
new FormData(form).get('selectName')检查实际提交值是否符合预期
最常被忽略的一点：前后端约定的“空值”语义必须一致。比如前端用 value="" 表示未选择，后端却期待 null 或 0，这种隐性不一致会在测试后期才暴露，修起来反而更费劲。
