原生HTML下拉框用<select>和<option>即可实现，无需JS或框架；核心是<select>包裹<option>，注意name、value、selected等属性及disabled/ multiple的正确使用。
HTML 下拉选择框用 <select> 和 <option> 就够了
不需要 js、不用框架，原生 html 三行代码就能跑起来。核心就是 <select> 包住一堆 <option>，浏览器自动渲染成下拉菜单。
常见错误是把 <option> 写在 <select> 外面，或者漏掉 value 属性导致表单提交时拿不到值。
-
<select>必须有name属性，否则提交时这个字段不会被发送 -
<option>的value值决定提交内容，显示文字用标签内文本，二者可以不同 - 默认选中加
selected属性，但只能有一个生效（多个时以最后一个为准）
<select name="city"> <option value="bj">北京</option> <option value="sh" selected>上海</option> <option value="gz">广州</option> </select>
禁用、只读、多选这些状态怎么控制
<select> 不支持 readonly，想“看起来可点但不能选”，得用 disabled；想限制多选就加 multiple 属性。
注意：加了 disabled 的 <select> 提交时完全不传值，哪怕它有 name；而 multiple 会让用户按 Ctrl/Command 多选，后端接收时通常是数组形式（如 city[]=bj&city[]=gz）。
-
disabled：禁用整个控件，灰色不可交互，不参与表单提交 -
multiple：开启多选，会变成滚动列表样式（非下拉），视觉上和单选不同 - 没有
readonly等效写法，真要只读可用 JS 拦截change事件，或改用<output>+ 隐藏域组合
怎么让某个选项默认不显示为可选内容
比如“请选择城市”这种提示项，不能让它被当真实选项提交——否则后端得额外判断 value="" 或 value="placeholder"。
立即学习“前端免费学习笔记（深入）”；
正确做法是用 disabled + selected + 空 value，这样它会显示，但无法被再次选中，且提交时不会带上该值。
- 写成
<option value="" disabled selected>请选择城市</option> - 别用
hidden属性，它会让选项彻底消失，起不到提示作用 - 如果用了
required，这个空值项会导致校验失败，所以必须确保用户至少选一个非空项
移动端下拉体验差？几个实际影响点
iOS Safari 和 Android Chrome 对 <select> 渲染逻辑不同：iOS 弹原生滚轮，Android 可能弹模态框或仿原生下拉，样式基本没法改。
真正能动的只有 size（控制可见行数）、autofocus、required 这些属性；CSS 只能调字体、颜色、宽高，箭头图标、下拉面板完全不可控。
- 不要试图用 CSS 改
appearance: none后自己画箭头——iOS 下无效，Android 表现不一致 -
size="5"会让<select>变成多行列表，失去下拉行为，慎用 - 如果需要高度定制（比如带搜索、分组、图标），得换方案：用
<div>模拟，配合 JS 控制显隐和值同步
原生 <select> 的优势是语义清晰、无障碍支持好、无需 JS 即可工作；劣势是样式锁死、扩展性差。选哪个，取决于你能不能接受“选中态一模一样，但长得不像设计稿”这件事。
