下拉框首项禁用最稳妥做法是为首个同时添加disabled和selected属性且value=""，确保不可选、默认高亮、不提交值；仅selected或仅js拦截均不可靠，后端必须校验。
下拉框首项设为禁用但保留显示
直接给第一个 <option></option> 加 disabled 属性，它就不会被选中，且浏览器会默认置灰显示——这是最稳妥、兼容性最好的做法。注意：仅加 selected 不够，用户仍可手动点选；必须配合 disabled 才真正禁止交互。
常见错误是只写 <option selected>请选择</option>，结果用户一点击就选中了。正确写法是：
<select name="category"><option value="" disabled selected>请选择</option> <option value="a">选项A</option> <option value="b">选项B</option></select>
-
disabled让该项不可聚焦、不可点击、不会提交值 -
selected确保页面加载时默认高亮该行（尽管它被禁用） -
value=""是好习惯，避免后端收到意外空字符串或 null 值
JavaScript 动态阻止首项被选中
如果下拉框是动态生成的，或首项需在运行时才“变禁用”，就得用 JS 监听 change 事件并回退。但注意：这不是替代 disabled 的方案，而是兜底手段——因为用户可能通过键盘操作绕过初始禁用状态（比如按空格/回车触发）。
示例逻辑：
const sel = document.querySelector('select[name="category"]');
sel.addEventListener('change', function() {
if (this.value === '') {
this.selectedIndex = 0; // 强制回到首项
}
});
- 仅当首项
value是空字符串时生效，需和 HTML 中的value=""对应 - 不推荐单独依赖此逻辑，否则首次加载后用户仍能用方向键选中首项
- 移动端 Safari 对
selectedIndex设置有延迟，建议搭配setTimeout(() => { ... }, 0)微调
后端验证不能省，前端只是体验层
无论 HTML 还是 JS 怎么限制，disabled 的 <option></option> 在表单提交时根本不会发到后端——所以如果后端没校验 category 是否为空或是否为合法枚举值，攻击者直接 POST category= 就能绕过所有前端控制。
- 后端必须检查字段是否存在、是否在允许列表内、是否为空值
- 不要信任
disabled会阻止数据提交，它只影响浏览器默认行为 - 尤其注意：某些框架（如 Django 表单）会忽略
disabled字段的值，但若手动构造请求，照样能传
Chrome 和 Safari 对 disabled option 的渲染差异
Chrome 会把 disabled 的 <option></option> 显示为灰色文字，Safari 却可能保持黑色（尤其在 macOS 上），仅靠视觉无法判断是否真禁用。用户可能误以为能点，结果点了没反应，体验断层。
- 务必加提示文案，比如 “请选择有效选项” 而非模糊的 “请选择”
- 可用 CSS 强制统一样式：
select option:disabled { color: #999; }，但 Safari 对option的样式支持有限，慎用 - 更可靠的方式是用
<optgroup label="请选择"></optgroup>替代首项，但语义不同，且部分屏幕阅读器处理不佳
select 元素的 value 初始值为空字符串，而很多 JS 库（如 jQuery 的 .val()）或表单序列化工具会跳过空值字段——这可能导致表单验证逻辑漏判。得提前确认你用的工具链如何处理 disabled + empty value 的组合。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
