select标签必须配合option标签才能形成可用下拉菜单；表单提交成功需满足三点：select有name属性、每个option显式设value、用布尔属性selected指定默认项。
select 标签本身不渲染任何可见内容，必须配合 option 才能形成可用下拉菜单；漏掉 name 属性会导致表单提交时整个字段消失，后端收不到值。
怎么写才能让表单提交成功
核心就三点：有 name、每个 option 有 value、用 selected 指定默认项。
-
name必须加在select上，不是option—— 没它，浏览器根本不会把这个字段塞进提交数据 - 每个
option显式写value，别依赖显示文字自动 fallback；中文、空格、换行都可能让后端解析失败 -
selected是布尔属性，只写selected就生效，selected="true"或selected="selected"都是冗余写法 - 首项建议设为提示项：
<option value="" selected>-- 请选择 --</option>，方便后端校验空值
为什么 disabled 加在 option 上没反应
option disabled 在部分旧浏览器（如 IE11）中不生效，且即使支持，也只是灰显该项，不影响用户切换焦点或操作其他选项。
- 要禁用整个下拉框，必须把
disabled加在select标签上：<select disabled></select> - 禁用单个选项可用
<option value="xxx" disabled>暂不可选</option>，但得确认目标浏览器支持 -
readonly对select完全无效，HTML 规范不承认这个属性，写了也白写
移动端 onchange 不触发或延迟怎么办
onchange 在移动端实际行为是“失焦后才触发”，不是点选即响应——这是规范定义，不是 bug。
- 想实现点击即响应，改用
input事件（部分现代浏览器支持），或监听click后手动读取select.value - Safari 对
input事件支持差，必须兜底：加防抖 + 焦点离开时再 check 一次 - React/Vue 项目里混用
v-model和直接操作select.value = "xxx"，容易导致事件丢失或视图不同步 - 避免用
onchange="xxx()"行内写法，优先用addEventListener('change', handler)，兼容性更好
样式能改到什么程度
原生 select 的外观控制力极弱：Chrome/Firefox 能调边框、字体、背景色，但下拉箭头、滚动条、高亮色基本无法定制；Safari 更保守，appearance: none 常被忽略。
- 轻度美化可安全使用：
border、padding、font-size、color - 别碰
background-image替换箭头——移动端大概率失效，且破坏可访问性 - 真要自定义外观（比如圆角+图标+hover），得用 JS 模拟（
div+ul），同时保留原生select作降级和无障碍支持 - 模拟方案必须补全
aria-expanded和aria-haspopup="listbox"，否则屏幕阅读器识别不了这是下拉控件
最易被忽略的是：表单提交前没检查 select 是否在有效的 form 标签内，或者 form 的 method 和 action 配置错误——这时无论 HTML 写得多标准，数据都发不出去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
