最简可用的select下拉框需具备name属性、option有value或文本、用selected指定默认项；缺一可能导致提交失败或行为异常，name缺失则后端完全收不到该字段。
最简可用的 <select> 下拉框，只要写对三样东西：必须有 name、每个 <option> 要有值或文本、默认选中用 selected —— 少一个就可能提交失败或行为异常。
怎么让 select 提交时带数据
浏览器只把带 name 属性的 <select> 字段加入表单提交。没加 name，后端根本收不到这个字段，连空字符串都不会有。
-
<select name="category">✅ 正确，后端能收到category=electronics -
<select>❌ 不提交，控制台 Network 里都看不到这个字段 -
value属性不写时，浏览器会自动用<option>的文本内容作为提交值，但依赖文本易出错（比如含空格、换行），建议显式写value
禁用某一项 vs 禁用整个下拉框
disabled 放的位置决定作用范围，且影响表单提交逻辑：
- 放在
<select disabled>上 → 整个控件置灰、不可点、不参与提交（字段直接被忽略） - 放在
<option disabled>上 → 该项变灰不可选，但其他项仍可操作；如果它恰好是默认项（selected），用户必须手动切换，否则提交时仍会发它的value - 空
value的<option value="">请选择</option>很常见，但后端必须明确判断""是合法空值还是用户未选择，不能假设“没传就是空”
怎么绑定 label 和 select 提升可访问性
屏幕阅读器靠 label 的 for 和 select 的 id 关联来读出控件说明。不配对的话，视障用户可能只听到“下拉列表”，不知道这是选城市还是选性别。
立即学习“前端免费学习笔记（深入）”；
- 写法必须严格对应：
<label for="city">所在城市</label>+<select id="city" name="city"> -
for值必须和id完全一致（区分大小写、不能有空格） - 如果用
<label><select>...</select></label>包裹方式，可以省略for/id，但嵌套结构容易破坏布局，不推荐
multiple 属性不是“多选样式”，而是提交格式开关
加了 multiple 后，用户按 Ctrl/Cmd 多选，但后端接收方式彻底改变 —— 不再是单个字符串，而是多个同名参数或数组（取决于后端框架）。
-
<select name="tags" multiple>提交时，传统表单编码会变成tags=js&tags=css&tags=html - JavaScript 中用
select.selectedOptions取值，而不是select.value（后者只返回第一个选中项） - 移动端 Safari 对
multiple支持有限，常退化为单选弹窗，业务上需要多选时，更稳妥的做法是用自定义组件或标签选择器
真正容易被忽略的是：空 <option> 和 selected 共存时，用户第一次打开页面就可能误提交默认空值；而 disabled 的 <option> 如果没配合 selected，会导致初始状态无选中项 —— 这两种情况在表单验证逻辑里都得单独处理。
