HTML下拉菜单最简方案是用和，兼容性好、语义清晰；深度定制需+CSS+JS或引入Choices.js等库，原生样式与交互受限，不支持搜索、自定义面板及键盘过滤。
HTML 本身只能提供 <select></select> 和 <option></option> 的基础结构，真正可交互、带样式、支持搜索或分组的下拉菜单，必须靠 CSS + JavaScript 配合实现。
用原生 <select></select> 实现最简下拉
这是兼容性最好、语义最清晰的方式，适合表单提交场景，但样式和行为受限：
- 浏览器强制控制展开逻辑，无法自定义箭头图标或下拉面板位置
-
appearance: none可隐藏默认箭头，但 Safari 需要额外加-webkit-appearance: none - 不支持键盘输入过滤选项（即不能边打字边匹配）
- 移动端会触发系统原生选择器，样式完全不可控
示例结构：
<select name="city"> <option value="" disabled selected>请选择城市</option> <option value="bj">北京</option> <option value="sh">上海</option> </select>
用 <div> + <code><button></button> + <ul></ul> 手写下拉（无框架）
这是可控性最强的方案，适合需要定制动画、焦点管理或嵌入复杂内容（如图标、复选框）的场景：
立即学习“前端免费学习笔记（深入）”；
- 必须手动处理
click、keydown（尤其是ArrowDown/Escape）、focusin/focusout - 需给下拉列表加
role="listbox"，每个选项加role="option"，并同步aria-expanded和aria-activedescendant才能通过无障碍检测 - 点击空白处关闭需监听
document的click，但要排除下拉区域自身（用event.target.closest()判断） - CSS 中用
position: absolute定位下拉面板时，父容器需设position: relative
用 select2 或 Choices.js 快速落地
如果项目允许引入第三方库，select2（jQuery 依赖）和 Choices.js（纯 JS，无依赖）是目前最稳妥的选择：
-
select2对旧版 IE 支持更好，但体积大（约 100KB），且 jQuery 是硬依赖 -
Choices.js更轻量（~20KB），API 清晰，支持异步加载选项、分组、禁用项，但不支持 IE11 以下 - 两者都默认启用键盘导航和搜索过滤，但
Choices.js的搜索是客户端全量匹配，大数据量时建议关掉或换为服务端搜索 - 初始化后，原始
<select></select>会被隐藏，新 DOM 插入到其后，调试时注意真实表单值仍来自原<select></select>
简单初始化示例（Choices.js）：
const choices = new Choices('[data-trigger="choices"]', {
searchEnabled: true,
shouldSort: false
});
为什么别用 <datalist></datalist> 替代下拉菜单？
<datalist></datalist> 是为 <input> 提供自动补全建议的，不是下拉菜单：
- 用户可以随意输入，不限于
<option></option>中的值；而下拉菜单通常要求值必须来自预设项 - 没有展开/收起状态控制，无法监听“选择完成”事件（
input事件只反映输入变化） - 不支持键盘方向键高亮选项，也无法用回车确认选择（除非自己补全整套逻辑）
- Chrome 下
<datalist></datalist>选项点击后不会自动填充到 input，需监听input并手动 set value
真要用它模拟下拉，等于重写一个简易版 Choices.js，得不偿失。
最容易被忽略的是焦点管理和键盘操作——很多手写下拉在 Tab 键切换时直接跳过整个组件，或者按方向键没反应。这不是“锦上添花”，而是影响基础可用性的关键点。
