hidden属性对无效，浏览器完全忽略；可靠方案是disabled+selected组合，确保视觉占位且不提交值。
hidden 属性在 <option></option> 上根本不起作用
浏览器（包括 Chrome、Firefox、Safari）对 <option></option> 元素的 hidden 属性完全忽略——它不会隐藏选项，也不会阻止用户选中，更不会让该选项在下拉列表中消失。这是 HTML 规范明确允许的行为：hidden 对 <option></option> 无效，不是 bug，是设计如此。
常见错误现象：
– 写了 <option hidden value="">请选择</option>，结果“请选择”依然显示在下拉菜单里
– 用 JS 动态设置 option.hidden = true，界面毫无变化
– 以为加了 hidden 就能当占位符且不被提交，但表单提交时只要它被选中（哪怕默认选中），value 仍会发出去
真正可用的默认占位方案：disabled + selected
要实现“视觉可见但不可选、不参与提交、作为初始提示”，唯一可靠方式是组合使用 disabled 和 selected：
<select name="category"><option value="" disabled selected>-- 请选择分类 --</option> <option value="news">新闻</option> <option value="blog">博客</option></select>
关键点：
– disabled 让该选项无法被鼠标/键盘选中（用户点它没反应）
– selected 确保页面加载时它被默认高亮（视觉占位）
– value="" 配合后端校验逻辑（如要求非空），可自然识别为“未选择”
– 表单提交时，disabled 的 <option></option> 不会发送其 value（即使有值）
为什么不能只用 selected 或只用 disabled
只加 selected：
– 用户可以正常点击切换到这个选项，失去“占位提示”的语义
– 提交时若 value="" 被发过去，后端需额外判断空字符串是否合法
只加 disabled：
– 浏览器不会自动选中它，下拉框可能显示第一个可选项（如“新闻”），用户第一眼看不到提示文字
– 若没设 selected，部分旧版 IE 还可能出现无默认值的混乱状态
其他陷阱：
– 不要用 display: none 或 visibility: hidden 样式隐藏 <option></option>：CSS 对 <option></option> 渲染控制极弱，多数浏览器直接无视
– 不要依赖 placeholder 属性：<select></select> 不支持 placeholder，写了也无效
需要动态禁用/启用占位项？JS 操作要绕开 DOM 同步陷阱
如果业务要求“用户填了其他字段后才允许选择某个分类”，想通过 JS 控制占位项状态，注意：
– 直接改 option.disabled 是安全的，但别忘了同步处理 select.value
– 如果占位项当前被选中，又把它 disabled 了，某些浏览器（如 Safari）可能不会自动跳到下一个可选项，导致 select.value 仍为 "" 但 UI 显示空白
稳妥做法：
– 先检查当前 select.value === ""
– 若是，手动设 select.selectedIndex = 1（跳到第一个有效项）或清空选择（select.value = "" 并确保有 disabled selected 占位项存在）
– 避免在事件中反复 toggle 同一个 <option></option> 的 disabled 状态，容易触发渲染异常
最易被忽略的一点：当 <select></select> 是受控组件（React/Vue）时，DOM 的 disabled 状态和框架的数据状态必须严格一致，否则会出现 UI 和实际 value 脱节——比如 JS 禁用了占位项，但框架 state 还记着 value=""，下次 re-render 就可能意外恢复可选状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
