HTML select不支持readonly，需用disabled加隐藏域或pointer-events: none；title仅纯文本提示且移动端无效，推荐disabled+span title或div模拟下拉实现只读与提示。
HTML下拉框不能用 readonly，得用 disabled 或 pointer-events: none
HTML 的 元素不支持 readonly 属性——设了也没效果，浏览器直接忽略。如果只是想让用户看到选项但无法更改，又希望表单提交时仍携带该值，disabled 会阻止提交（值不会发到后端），这时得换思路：
- 用
disabled+ 额外隐藏域（）存当前选中值 - 用 CSS 禁用交互但保留表单行为：，同时保留
name和选中状态，值可正常提交 - 加
onfocus="this.blur()"强制失焦，但兼容性和可访问性差，不推荐
title 属性能触发悬停提示，但仅限纯文本且无样式控制
title 是最轻量的悬停提示方案，写在 或每个 上都生效：
注意：title 提示内容无法换行、不能加图标、不支持点击交互，且在移动端多数浏览器不触发（iOS Safari 默认禁用）；若需更可靠提示，得用 JS + aria-describedby 或第三方 tooltip 库。
真正“只读+提示”组合方案：禁用交互 + 自定义提示文案
常见需求其实是「显示当前值、不可改、鼠标悬停有说明」。这时推荐分离职责：
立即学习“前端免费学习笔记（深入）”；
- 用
显示当前选项（视觉锁定） - 旁边放一个
北京市作为只读展示和提示载体 - 或用 模拟下拉外观，配合 CSS 下拉箭头背景图，完全可控
这样既规避了
select的语义限制，又能自由绑定title、data-*属性或 JS tooltip。移动端适配要特别注意
title和禁用逻辑在 iOS 和部分安卓 WebView 中：
-
title悬停几乎无效（没 hover 概念），用户长按也不会弹出 -
disabled的可能仍唤起原生选择器（Safari 旧版本存在） - 用
pointer-events: none在移动端更稳定，但需测试是否影响 VoiceOver 等读屏器识别
如果必须兼顾无障碍，优先用
aria-live+aria-label补充说明，而非依赖title。 -
