HTML中select默认选项 HTML中select标签selected属性用法-html教程-PHP中文网

selected 是布尔属性，写上即生效；多个 option 同时加 selected 仅第一个被选中；正确写法为上海；select.value 按值匹配，selectedindex 按索引操作；react 中须用 value prop 控制，默认值需与服务端/缓存对齐。

html中select默认选项 html中select标签selected属性用法

selected 是布尔属性，写上就生效，不是开关式配置项；多个 option 同时加 selected 会导致语义混乱，浏览器只认第一个。

HTML 原生设置默认选项：只用 `selected` 属性

最简方式就是在目标 option 标签里直接写 selected，不用赋值。浏览器加载时自动高亮并选中该项。

常见错误包括：

selected="true" 或 selected="selected" —— 冗余写法，HTML 规范不需值
多个 option 都带 selected —— 浏览器仅选中第一个，但 JS 读取 selectedIndex 仍为 0，后续逻辑可能误判
给 disabled 的 option 加 selected —— 视觉上不会被高亮，且多数浏览器会忽略该选中状态

正确示例：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<select name="city"><option value="">请选择城市</option>
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option></select>

`select.value` 和 `select.selectedIndex` 的区别与风险

JS 动态设默认值时，两种方式行为不同，容易踩坑：

select.value = "sh"：按字符串精确匹配 option.value，大小写、空格都敏感；若没匹配到，select.value 变为空字符串，界面无变化
select.selectedIndex = 2：按索引操作，简单直接，但选项增删后极易错位（比如插入一个新 option 在前面，原 index=2 就变成第三项）
设值前必须确保 select 已挂载到 DOM，否则赋值无效（常见于 React/Vue 组件未完成挂载时就执行）
手动设值不会触发 change 事件，需要显式调用 dispatchEvent(new Event('change', { bubbles: true }))

“请选择”提示项的写法和后端注意事项

用空 value 的 option 做占位提示很常见，但要注意它不是装饰项：

<option value="" selected>请选择</option> 是合法写法，提交表单时该字段值就是空字符串（""），不是 null 或 undefined
如果后端把空字符串当作有效值处理，可能造成脏数据；建议后端明确校验 value !== ""，或前端加 required 属性配合 <option value="" disabled></option>
禁用提示项更稳妥：<option value="" disabled selected>请选择</option>，用户无法再次选中它，也避免误提交

React 中不能靠 `selected` 属性设默认值

React 的 select 是受控组件，DOM 属性会被 React 状态覆盖：

写 <option selected></option> 不起作用，甚至触发警告：“a component is changing an uncontrolled input to be controlled”
必须用 value prop 绑定 state，并在 onChange 中同步更新
初始 state 要和后端/URL/缓存对齐，比如从 localStorage 读取上次选择：const [value, setValue] = useState(localStorage.getItem('city') || 'sh')
服务端渲染（SSR）时，确保首次 hydration 的 value 和 HTML 输出一致，否则 React 会重绘整个下拉框

真正麻烦的不是怎么设默认值，而是默认值在不同上下文（HTML 渲染、JS 动态赋值、React 受控、表单重置、无障碍读屏）中表现不一致——尤其是空 value 和 disabled 的组合，稍不注意就会让后端收不到值，或前端校验失效。