readonly 对 <select> 和 <option> 完全无效，因其仅适用于文本输入元素；禁用下拉框须用 disabled 属性，禁用单个选项则在 <option> 上加 disabled。
readonly 属性根本不能阻止 <select> 被键盘选择——它对 <select> 和 <option> 完全无效，浏览器会直接忽略。
为什么 readonly 在 select 上完全不生效
HTML 标准只允许 readonly 作用于可直接输入文本的元素，比如 <input type="text"> 或 <textarea>。<select> 的交互逻辑是“展开→点击/方向键切换→回车确认”，不是文本编辑，所以没有定义 readonly 的行为。你写上 readonly，浏览器既不报错，也不响应，用户依然能用 Tab 聚焦、空格展开、上下键切换选项。
- 写
<select readonly>或<option readonly>都是徒劳 - 部分旧版 Chrome 曾短暂支持过（非标准），但早已移除，不可依赖
- React/Vue 中写
readonly={true}或:readonly="true"同样无效，因为底层 DOM 不认
想禁用整个下拉框？必须用 disabled
要真正阻止键盘操作（Tab 进入、空格展开、方向键切换）、鼠标点击，同时让视觉置灰、语义明确，唯一合规方式是给 <select> 加 disabled 属性：
<select name="status" disabled> <option value="pending">待处理</option> <option value="done" selected>已完成</option> </select>
- 用户无法聚焦该
<select>，Tab 键自动跳过 - 提交表单时，这个字段的值不会出现在
FormData或序列化结果中 - 如果后端需要这个值，你得在 JS 提交前手动补上，或改用其他字段传值
只想禁用某个具体选项？用 option 的 disabled
若目标是“保留下拉框可用，但不让用户选中某一项”，正确做法是在对应 <option> 上加 disabled：
立即学习“前端免费学习笔记（深入）”；
<select name="role"> <option value="" disabled selected>请选择角色</option> <option value="user">普通用户</option> <option value="admin" disabled>管理员（暂未开放）</option> </select>
- 被
disabled的<option>会置灰，键盘方向键会跳过它，鼠标点击无反应 - 它不会被提交，也不会成为
select.value的结果 - 切勿让
disabled选项同时带selected，否则页面加载时显示它，但用户无法操作，容易导致空提交
最常被忽略的一点：禁用行为必须由 HTML 属性驱动，pointer-events: none 或 user-select: none 这类 CSS 只拦鼠标，拦不住键盘焦点和方向键切换，也不影响表单语义。真要控制交互，别绕开 disabled。
