html下拉菜单用和实现，需闭合标签、设name属性、value用英文小写加下划线；多级联动须js控制；可分组但不支持嵌套；移动端原生样式不可完全自定义。
HTML下拉菜单用 <select></select> 和 <option></option> 实现
直接写 <select></select> 标签，里面塞 <option></option> 就能跑起来，不用额外 JS 或 CSS。浏览器原生支持，语义清晰，移动端也默认唤出选择器。
常见错误是把 <option></option> 写成自闭合标签（如 <option value="cat"></option>），这会导致选项不显示——<option></option> 必须有结束标签或使用开始+内容形式。
-
<select></select>一定要有name属性，否则表单提交时该字段不会被发送 - 首项建议用
<option value="" disabled selected>请选择分类</option>，避免用户误选默认值 -
value值别带空格或中文（尤其做后端接收时），推荐用英文小写+下划线，比如electronics、home_appliances
多级分类下拉菜单不能只靠 HTML
纯 HTML 的 <select></select> 只支持单层扁平列表，没法直接实现“一级选手机 → 二级显示 iPhone/华为/小米”这种联动效果。必须配合 JS 控制显隐或动态替换 <option></option>。
典型做法是：准备两组 <select></select>，第一个叫 category，第二个叫 subcategory，初始禁用（disabled）；监听第一个的 change 事件，根据选中值清空并填充第二个的 <option></option>。
容易踩的坑：
– 每次填充前忘了调用 selectElement.innerHTML = "" 或 selectElement.length = 0，导致选项重复叠加
– 使用 innerHTML += "<option>..."</option> 拼接，可能触发 XSS（如果数据来自用户输入）；更安全的做法是用 document.createElement("option") 动态创建
让下拉菜单支持搜索和分组
原生 <select></select> 不支持搜索，但可以用 <optgroup></optgroup> 实现视觉分组，提升可读性。比如按业务线分“硬件”“软件”“服务”，每组用 <optgroup label="硬件"></optgroup> 包裹对应 <option></option>。
注意：<optgroup></optgroup> 本身不可选，也不能设 value；它的 label 不会提交，仅作展示。
- 分组嵌套不被支持——
<optgroup></optgroup>里不能再套<optgroup></optgroup> - 部分旧版 Safari 对
<optgroup></optgroup>样式支持弱，如font-size或颜色设置可能失效 - 真要搜索功能，得换第三方库（如 Select2、Choices.js），但会增加体积和维护成本，简单场景不建议
移动端下拉菜单的兼容与体验细节
iOS Safari 默认把 <select></select> 渲染成滚轮选择器，Android 各厂商差异大（有些弹浮层，有些仿系统 Spinner）。无法用 CSS 完全重置样式，appearance: none 在 iOS 上基本无效。
真正影响体验的是：别在 <select></select> 外层加 overflow: hidden 或过小的 height，否则 iOS 下拉面板可能被截断；也别给 <select></select> 设固定宽高再配 text-overflow: ellipsis，文字截断逻辑在原生控件里不生效。
如果分类项超过 20 条，用户滑动找起来很累——这时候不如改用按钮 + 弹层列表（用 <div role="listbox"> + ARIA 属性），虽然开发量略增，但可控性高得多。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
