select基本结构为<select>包裹多个带value属性的<option>，value决定提交值；默认选中用selected布尔属性；样式受限建议轻度美化或JS模拟；onchange在失焦时触发，移动端需防抖兜底。
select 标签怎么写基本结构
直接用 <select> 包住多个 <option> 就能生成下拉菜单，浏览器原生支持，不用 JS 也能交互。关键点是每个 <option> 必须有 value 属性——表单提交时传出去的就是这个值，不是显示文字。
常见错误：只写 <option>苹果</option>，没设 value，后端收不到或收到空字符串。
正确写法示例：
<select name="fruit"> <option value="">请选择</option> <option value="apple">苹果</option> <option value="banana">香蕉</option> </select>
如何设置默认选中项
靠 selected 属性，加在某个 <option> 上就行。注意只能有一个生效，多个加了也只认第一个；而且它不等于“禁用选择”，用户依然可以改。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
-
selected是布尔属性，写selected="true"或selected="selected"都多余，selected单独存在就生效 - 如果想让页面加载时默认选中但不让用户改，得加
disabled，但这样该选项不会随表单提交 - 动态场景（比如编辑表单）建议用 JS 设置
select.value = "xxx"，比硬写 HTML 更可控
下拉菜单样式怎么改才靠谱
原生 <select> 的外观高度受限：Chrome/Firefox 支持改背景、文字、边框，但没法动下拉箭头、滚动条或选项高亮色；Safari 更保守，很多 appearance 相关 CSS 会被忽略。
实操建议：
- 轻度美化用
border、padding、font-size没问题，但别碰background-image箭头替换——兼容性差，移动端常失效 - 真要自定义外观（比如圆角、图标、hover 效果），得用 JS 模拟下拉（如用
<div>+<ul>），同时保留原生<select>做降级和无障碍支持 - 必加
aria-expanded和aria-haspopup，否则屏幕阅读器识别不了这是可展开控件
为什么 onchange 不触发或触发两次
onchange 只在用户手动切换选项且焦点离开 <select> 时触发（比如点选后点别处），不是每次点击都响应。这是规范行为，不是 bug。
典型问题和解法：
- 想“点一下就立刻响应”？改用
onclick或监听input事件（部分浏览器支持），但要注意input在 Safari 中对select不触发 - React/Vue 项目里绑定
v-model或value后又手动调select.value = xxx，可能造成事件丢失——统一走框架的数据流，别混用 DOM 操作 - 移动端点开后快速滑动选择，有时
onchange延迟触发或漏触发，建议加防抖或 fallback 到blur事件兜底
真正难的不是画出下拉框，而是让它在不同设备上行为一致、提交值可靠、对键盘和读屏器友好。别小看 value 和 name 这两个属性，后端接不住数据，八成是它们没配对。
