HTML中select默认选中靠option的selected布尔属性，写上即生效；多个option设selected时仅第一个生效；multiple下允许多选；JS动态设置用selectedIndex或option.selected，不可用value赋值。
HTML 中 select 的默认选中靠 selected 属性，不是靠 JS 或 class
直接在某个 option 标签上加 selected 属性，浏览器就会把它作为初始选中项。这个属性是布尔属性，写上就生效，值写不写 ="selected" 都行（但推荐只写 selected，更符合 HTML5 规范）。
常见错误是试图用 class="selected"、style="selected" 或 JS 动态设置 value 来“模拟”默认选中——这些都不起作用，页面加载时不会触发选中逻辑。
-
selected必须写在option元素上，不能写在select上 - 多个
option写了selected，浏览器只认第一个（HTML 规范行为） - 如果
select有multiple属性，可以多个option同时带selected
动态设置默认选中：JS 操作 select.selectedIndex 或 option.selected
页面已加载后想改默认选中项，得用 JS。两种主流方式：
- 通过索引：
selectElement.selectedIndex = 2（设第 3 个选项为当前选中） - 通过元素：
optionElement.selected = true（更直观，适合按 value 查找后操作）
注意：selectedIndex 设为 -1 表示“无选中”，但仅当 select 没有 required 属性时才允许；否则表单校验会失败。
立即学习“前端免费学习笔记（深入）”；
别用 select.value = "sh" 来“设默认值”——这只会临时改变当前值，不等于让对应 option 带 selected 属性，且刷新后失效。
const sel = document.querySelector('select[name="city"]');
// 方法一：按索引
sel.selectedIndex = 1;
// 方法二：按 value 查找并设 selected
Array.from(sel.options).find(opt => opt.value === "gz").selected = true;
服务端渲染或模板里怎么安全设默认值？别硬拼 HTML 字符串
用 PHP、Django、Vue 或 React 渲染时，容易犯的错是手动拼 " 这类字符串——可读性差、易 XSS、漏转义。
- 模板引擎（如 Jinja2、Twig）优先用内置的
selected判断语法，比如{% if opt.value == default_value %}selected{% endif %} - React 中用
value控制受控组件，select的value属性决定哪个option显示为选中（此时selected属性本身可省略） - Vue 用
v-model绑定，同样不需要手动写selected
关键点：服务端/框架层面的“默认选中”，本质是确保最终输出的 HTML 中，有一个 option 带了 selected 属性（静态场景），或 select 元素的 value 与某个 option.value 匹配（受控组件场景）。
为什么设置了 selected 却没生效？检查这三点
最常被忽略的三个原因：
-
select外层被 JS 框架（如 Angular、Alpine.js）接管，且未同步初始化绑定值 → 检查框架文档中关于“初始值”的设置方式 -
option的value和你认为的“默认值”不一致（比如空格、大小写、编码问题）→ 打开开发者工具看实际渲染出的value属性 - 页面有脚本在 DOM 加载后立即执行
select.value = ""或重置表单 → 检查是否有form.reset()或类似逻辑在 onload 时运行
真要调试，最简单办法：打开控制台，执行 document.querySelector('select').selectedIndex，看返回值是否符合预期。不是 0 就说明默认没设对，或者被后续代码覆盖了。
