可用的下拉框需用<select name="xxx">包裹多个<option value="val">文本</option>，name确保提交字段，value指定提交值，selected设默认项，disabled可禁用整体或单选项。
如何用 <select> 和 <option> 写出可用的下拉框
直接写就行，但得保证结构合法：一个 <select> 包住若干 <option>，每个 <option> 有 value（提交值）和文本内容（用户看到的）。浏览器会自动渲染成下拉菜单。
常见错误是把 <option> 放在 <select> 外面，或者漏掉 value 导致表单提交时传空字符串。别用 <div> 或 <span> 套 <option> —— 它们不接受子元素。
-
<select>必须有name属性，否则提交时不会带这个字段 - 默认选中项用
selected属性，不是default或checked - 禁用整个下拉框加
disabled；禁用某一项则给对应<option>加disabled
为什么 value 和显示文字不一致很关键
用户看到的是 <option>中文选项</option> 里的“中文选项”，但表单提交或 JS 读取时拿到的是 value 属性值。如果没写 value，浏览器会把文本内容当 value，这在含空格、中文或特殊符号时容易出问题（比如 URL 编码混乱、后端解析失败）。
例如：<option value="usd">美元 (USD)</option> —— 用户看到友好文案，后端收到明确标识符 usd，比直接用 <option>美元 (USD)</option> 更可靠。
- 后端依赖
value做逻辑判断，而不是靠前端显示文本 - 国际化场景下，显示文本可变，
value应保持稳定（如zh-CN、en-US） - JS 中通过
selectElement.value获取的就是value属性值，不是 innerText
<optgroup> 怎么分组才不被忽略
用 <optgroup label="分组名"> 把相关 <option> 包起来，浏览器会渲染为带标题的分段列表。但注意：<optgroup> 本身不能被选中，也不能设 value；它的 label 不参与提交，纯展示。
容易踩的坑是把 <optgroup> 当成可选项，或者嵌套使用（不支持），又或者在它里面放非 <option> 元素（如 <span>）—— 这些都会被浏览器忽略或导致 DOM 结构异常。
-
label值会被截断或省略，如果过长（尤其在移动端），建议控制在 10 字以内 - 多个
<optgroup>之间不能用空<option>隔开，视觉分隔应靠 CSS 实现 - 动态插入
<optgroup>时，必须先创建元素再 append 到<select>，不能 innerHTML 拼接（部分浏览器不识别）
原生 <select> 的样式和交互限制在哪
原生下拉框的外观（箭头图标、聚焦边框、滚动条）基本不可控，CSS 只能改字体、颜色、尺寸等有限属性；::-webkit-appearance: none 可隐藏默认箭头，但得自己画，且 Safari/Edge 行为不一致。更重要的是：iOS 上 <select> 点击会触发系统选择器，无法自定义弹层。
所以别试图用纯 CSS 把它做成“按钮+浮层”效果 —— 语义和可访问性会崩。真要深度定制，该用 JS 模拟（如 <div role="combobox">），但得手动处理键盘导航（ArrowDown/Enter）、焦点管理、ARIA 属性（aria-expanded、aria-activedescendant）。
- 无障碍要求高时，原生
<select>是最稳妥的选择，屏幕阅读器支持完善 - 移动端优先项目里，避免监听
change做实时校验，因为 iOS 在选择器关闭后才触发 - 如果用
multiple属性，用户可按 Ctrl/Cmd 多选，但 UI 仍是原生多选框，无法改成标签式选择
<select> 就够了，但只要设计稿里出现“带搜索的下拉”“异步加载选项”“选项带图标”，就得立刻切换方案 —— 原生标签不支持这些。 
