html下拉菜单即<select>元素，需用name属性确保提交，value设标识符而非显示文本，disabled禁用但不提交值，multiple支持多选但体验差，placeholder无效须用空option替代。
html 下拉菜单就是 <select> 元素，没别的“高级写法”——直接用它，别绕弯。
怎么写一个基础的 <select>？
核心是 <select> 包裹若干 <option>，每个 <option> 的 value 是提交值，文本内容是用户看到的选项。
常见错误：漏掉 name 属性 → 表单提交时这个字段根本不会发出去；或者把文本写在 value 里，导致后端收到的是“显示文字”而非预期标识符。
-
<select name="city">——name必须有，否则后端收不到 -
<option value="sh">上海</option>——value应该是简短、稳定的标识（如缩写、ID），不是长描述 - 默认选中用
selected属性：<option value="bj" selected>北京</option>
disabled 和 readonly 哪个能用在 <select> 上？
readonly 对 <select> 无效 —— 浏览器直接忽略。想禁用下拉菜单，只能用 disabled。
但要注意：disabled 元素的值不会随表单提交；如果需要“不可编辑但必须提交”，得换思路：比如用 <input type="hidden"> 配合只读视觉样式（pointer-events: none + 灰色文字），而不是依赖 disabled。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确禁用：
<select disabled name="status"> - ❌ 无效写法：
<select readonly>（完全不起作用） - ⚠️ 提交陷阱：被
disabled的<select>，其name不会出现在 POST/GET 数据里
如何让下拉菜单支持多选？
加 multiple 属性即可，但行为和单选完全不同：用户需按 Ctrl（或 Cmd）点选，且默认显示为滚动列表（通常高 4 行），不是弹出式下拉。
不建议在移动端或普通表单中滥用 multiple —— 触屏体验差，用户容易误操作。真要多选，优先考虑 checkbox 组。
- 启用方式：
<select multiple name="hobbies"> - 默认高度由浏览器决定，可用 CSS 调整：
height: 100px;，但不要设太小（否则看不到选项） - 获取值时注意：js 中
selectElement.value只返回第一个选中项；要用selectElement.selectedOptions遍历全部
为什么 <select> 不能用 placeholder？
因为规范没定义 <select> 的 placeholder 属性 —— 所有浏览器都不支持。试图写 <select placeholder="请选择">，纯属浪费字符。
替代方案只有两种：一是用一个带空 value 的 <option> 作为提示项；二是用 JS 模拟 placeholder 效果（但增加复杂度，且影响可访问性）。
- ✅ 推荐做法：
<option value="" disabled selected>请选择城市</option> - ⚠️ 注意：
disabled的<option>不会被提交，且用户无法再次选中它（适合“必选”场景） - ⚠️ 如果允许“不选”，就去掉
disabled，只留selected，但要确保后端能处理空字符串
最常被忽略的一点：下拉菜单的语义本质是“有限选项的单值输入”，不是 ui 组件。别为了“好看”强行用 JS 重写 <select> —— 除非你已准备好处理键盘导航、屏幕阅读器兼容、表单验证联动和移动端原生选择器降级。