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 就说明默认没设对，或者被后续代码覆盖了。