HTML <select> 必须手动添加 <option>，每个需设 value 或文本；多选用 multiple 属性；name 决定表单提交字段名，不可为空；原生不支持 placeholder 和搜索，需用首项禁用模拟或引入库。
HTML <select> 标签怎么写才不漏选项
直接写 <select> 不会自动显示下拉项，必须手动加 <option>，而且每个 <option> 至少得有 value 或文本内容，否则用户点不动、js 也读不到值。
常见错误现象：<select> 渲染出来是空的，或者点击没反应；后台收不到值，其实是前端压根没给 <option> 设 value，只写了文字。
-
<option value="us">美国</option>—— 推荐：显式定义value，避免空格/中文导致后端解析异常 -
<option>默认选中</option>—— 不推荐：没value时，提交值是字符串“默认选中”，容易和真实数据混淆 - 首次加载时想默认选中某一项，用
selected属性，不是default（HTML 里没有这个属性）
怎么让 <select> 支持多选且 JS 能正确读取
默认单选，要多选必须加 multipile 属性（注意拼写是 multipile 不是 multiple？错，是 multiple，少个 l 就失效）。
使用场景：权限配置、标签筛选、批量操作入口。但要注意，<select multiple> 在移动端体验差，很多手机会强制弹出全屏选择器，用户反而找不到“确定”按钮。
- JS 读取多选值不能用
select.value，它只返回第一个选中项；得用select.selectedOptions配合Array.from()或循环 - 设置默认多选项：给对应
<option>加selected，不是写在<select>上 - 如果用框架（如 Vue/React），别直接操作 DOM 的
selected属性，走响应式数据更新
<select> 的 name 和 id 有什么区别，为什么表单提交总丢值
name 决定表单提交时的字段名，id 只用于 CSS 或 JS 定位 —— 这俩弄混是丢值最常见原因。
立即学习“前端免费学习笔记（深入）”；
错误现象：JS 能通过 document.getElementById("xxx") 拿到元素，但 form 提交后后端收不到这个字段，十有八九是 <select name=""> 忘写了，或者 name 值为空、含空格、用了特殊字符（如 user[role] 在某些后端框架里需要额外处理）。
-
name必须是非空字符串，且最好只含字母、数字、下划线、中划线 -
id可以和name相同，但没必要强求；id重复会导致document.getElementById只返回第一个 - 如果
<select>在<form>外，或被display: none包裹，它不会参与 submit，哪怕有name
禁用状态、占位提示、可搜索下拉这些原生不支持怎么办
原生 <select> 不支持 placeholder、禁用部分选项（<option disabled> 只能禁整个项）、也不支持搜索过滤 —— 这些需求一上来就硬改 <select> 样式或加 JS 拦截，很容易翻车。
性能影响：强行用 CSS 改 appearance 在 Safari 和旧版 Edge 上兼容性极差；用 JS 模拟下拉菜单，滚动、键盘导航、屏幕阅读器支持都得自己补。
- 真要 placeholder 效果，只能用第一个
<option>写提示文字，并设disabled selected，但要注意：如果用户不选任何项，提交时这个value也会发出去，后端得忽略空值 - 禁用某个选项用
<option disabled value="">-- 请选择 --</option>，但别指望它能在所有浏览器里灰掉文字颜色 - 搜索功能建议直接换库（如
choices.js或tom-select），别手撸；手撸成本远高于引入一个轻量脚本
原生 <select> 看似简单，但 name 缺失、value 漏设、multiple 下 JS 读值方式不同、以及 placeholder 的“伪实现”——这四点，几乎覆盖了线上 90% 的下拉菜单故障。
