selected是布尔属性，用于声明页面加载时哪个option为初始选中项；它仅在首次渲染生效，不赋值即生效，不可用于disabled选项或select标签，且多选时仅首个生效。
selected 是用来声明哪个 option 是初始选中项的布尔属性
它只在页面首次加载时生效，告诉浏览器“这个 option 应该被高亮并作为 select 的当前值”。只要存在，就自动触发选中行为，不需要赋值——selected="true" 或 selected="" 都是多余的写法。
常见错误包括：
- 多个
option同时加了selected：浏览器只认第一个，但后续 JS 读select.selectedIndex可能误判 - 给
disabled的option加selected：视觉上不会高亮，也不参与表单提交，等于白加 - 把
selected写在select标签上（如<select selected></select>）：无效，它只对option生效
为什么有时候写了 selected 却没反应
最常见原因是 DOM 渲染顺序或框架干预。比如：
- 在 Vue/React 中，如果同时用了
v-model或valueprop，原生selected会被忽略——框架接管了控制权 - JS 动态生成
option后才加selected属性：此时 DOM 已完成解析，属性添加无效，得用select.value = 'xxx'或select.selectedIndex = n -
select元素还没挂载到文档中（比如在 Shadow DOM 或未插入 body 前操作），赋值或设属性都无效果
验证方式：打开 DevTools，检查对应 option 是否真有 selected 属性，且没有被 JS 覆盖或框架重置。
selected 和 select.value 的行为差异
两者都能让某个选项看起来被选中，但机制不同：
-
selected是 HTML 层语义，仅影响初始状态；不触发change事件，也不改变select.value的读取结果（除非是首次加载） -
select.value = 'us'是运行时赋值，会立即更新 UI、滚动到对应项，并使select.value返回该值；但若值不匹配任何option.value，赋值会静默失败，select.value变为空字符串 -
select.selectedIndex = 2更底层，按索引操作，适合已知位置的场景；但选项增删后容易错位，维护成本高
例如：<option value="US">United States</option> 和 <option value="us">United States</option>，用 select.value = 'US' 就找不到，而用索引则不受大小写影响。
服务端渲染时怎么安全保留用户上次选择
不要依赖前端 JS 回填或浏览器自动记忆。关键在服务端逻辑：
- 把用户提交的
$_POST['country']（PHP）或等价参数存下来，作为下一次渲染的判断依据 - 模板中对每个
option做条件判断：<option value="us" echo :>>US</option> - 初始提示项（如
-- Select --）要用空字符串或明确占位值（如value=""），别加disabled，否则提交时拿不到值，导致校验失败或回填失效
这个逻辑比任何客户端 hack 都可靠——因为它是每次请求都重新生成 DOM，不存在“JS 没跑完”或“缓存干扰”的问题。
最容易被忽略的一点：selected 不是“默认值”，而是“初始渲染标记”。一旦页面加载完成，它就失去作用；后续所有交互和状态变更，必须靠 JS 或框架显式控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
