html 的 不支持 readonly 属性，生效方式只有 disabled（提交时忽略字段）或 pointer-events: none + tabindex="-1"（保留值且禁用交互）。
HTML 下拉框不能用 readonly
HTML 的 <select></select> 元素不支持 readonly 属性，写了也无效。浏览器会直接忽略它，下拉框依然可点击、可切换选项。这是初学者常踩的坑——误以为 readonly 像 <input> 那样通用。
真正生效的两种方式：禁用或只读模拟
要让下拉框“不可选”，只有两个可靠路径：一是彻底禁用（disabled），二是用 JavaScript 拦截交互、视觉上模拟只读。两者行为和适用场景完全不同：
-
disabled会让表单提交时忽略该字段，且默认灰显、不可聚焦 - 模拟只读需手动阻止
change、click、focus等事件，并配合 CSS 改变光标和背景色，但值仍会随表单提交
disabled 是最简单可靠的锁定方式
如果只是想锁死选项、且不关心是否参与提交，直接加 disabled 属性即可。它原生支持、无兼容性问题、语义清晰：
<select disabled> <option value="a">选项 A</option> <option value="b" selected>选项 B</option> </select>
注意：disabled 状态下，<select></select> 的值不会被包含在表单序列化结果中（如 formdata.append() 或 new URLSearchParams(form)），后端收不到该字段。
立即学习“前端免费学习笔记（深入）”；
需要保留值又不让改？用 pointer-events: none + tabindex="-1"
若必须提交该字段，又不允许用户修改，推荐组合方案：
- CSS 加
pointer-events: none拦截所有鼠标操作 - 加
tabindex="-1"防止键盘聚焦（否则按 Tab 还能进） - 再配个
style="cursor: not-allowed; background-color: #f5f5f5;"提升视觉反馈
这样既保留了 value 可提交，又阻断了所有常见交互路径。不需要 JS 监听事件，更轻量、更稳定。
容易被忽略的一点：某些旧版 Safari 对 pointer-events 在 <select></select> 上的支持不稳定，如有兼容性要求，建议 fallback 到 JS 监听 mousedown 并 e.preventDefault()。
