最简下拉菜单用包裹实现，value 为提交值，text 为显示文字，selected 设默认项，disabled 禁用选项；多选需加 multiple 属性，此时 ui 变为滚动列表，提交为多个同名参数。
用 <select></select> 和 <option></option> 写最简下拉菜单
浏览器原生下拉菜单不需要 JS 就能工作，核心就是 <select></select> 包住一堆 <option></option>。注意 <select></select> 默认是单选，值由用户点击决定，提交时只传 value 属性值。
-
<option></option>的value是表单提交的实际值，text（标签内文字）才是用户看到的 - 加
selected属性可设默认选项，但不要多个selected，否则行为不一致 - 如果想禁用某一项，给
<option></option>加disabled；整个下拉禁用则加在<select></select>上 - 示例：
<select name="city"> <option value=""> 请选择城市 </option> <option value="bj"> 北京 </option> <option value="sh" selected> 上海 </option> </select>
让下拉支持多选：必须加 multiple 属性
默认 <select></select> 只能选一个，按住 Ctrl（Mac 是 Cmd）多选的前提是显式声明 multiple。没有这个属性，键盘或鼠标多选行为会被忽略。
- 加了
multiple后，UI 会变成垂直滚动列表，高度通常需配合size属性控制可见行数（如size="4"） - 提交时同名字段会变成多个值，后端收到的是数组（如
city=sh&city=gz&city=sz） - JS 获取选中项要用
selectElement.selectedOptions，而不是value（后者只返回第一个） - 别误以为加了
multiple就能用鼠标拖拽框选——HTML 标准不支持，只能逐个点或 Ctrl/Cmd + 点
样式受限？<select></select> 的 CSS 能力边界在哪
原生 <select></select> 的样式控制非常有限，尤其箭头图标、下拉面板、聚焦态几乎无法跨浏览器统一定制。强行用 appearance: none 去掉默认样式后，Chrome/Firefox 表现差异大，Safari 甚至可能完全隐藏下拉按钮。
- 安全可改的：字体、颜色、宽度、高度、边框、背景色、圆角（部分浏览器）、禁用态样式
- 基本不能动的：下拉箭头位置 / 形状、展开面板样式、滚动条（除非用
::-webkit-scrollbar针对性处理）、焦点环细节 - 若真需要深度定制（比如带搜索、分组、图标），别硬改
<select></select>，直接用<div> 模拟，用 ARIA 属性保无障碍（如 <code>role="combobox",aria-expanded）
表单提交和 JS 交互：取值、设值、监听变化
和其它表单控件一样，
<select></select>的值靠value属性读写，但要注意初始值逻辑和事件触发时机。立即学习 “ 前端免费学习笔记（深入）”；
- JS 设默认值：直接赋
select.value = "sh"即可，浏览器自动高亮对应<option></option>；但得确保该value确实存在，否则静默失败 - 监听变化用
change事件（不是input），它只在用户操作完成且失去焦点或回车确认后触发 - 动态增删
<option></option>推荐用select.add(new Option(text, value))，比字符串拼接更安全，避免 XSS 风险 - 服务端渲染时若要预设值，优先用
value+selected，别依赖 JS 初始化，否则首屏可能闪动
- JS 设默认值：直接赋
