基础下拉框用包裹即可，name属性必填，value需唯一；多选加multiple属性但默认显滚动列表；select仅支持disabled不支持readonly；JS操作用value和selectedOptions属性。
怎么用
直接写 标签，里面套 就能跑起来，浏览器默认渲染成下拉列表。不需要 JS、不用框架，纯 HTML 就够用。
常见错误是漏掉 name 属性——表单提交时后端收不到值；或者把 value 写成空字符串或重复值，导致提交逻辑错乱。
-
必须带name，否则提交时这个字段不会出现在请求体里 - 每个
的value应该唯一且有意义，别全用"1"、"2" - 默认选中用
selected属性：
<select name="framework"><option value="">-- 请选择 --</option> <option value="react">React</option> <option value="vue">Vue</option> <option value="svelte">Svelte</option></select>
怎么让下拉框支持多选（multiple）
加 multiple 属性就能按住 Ctrl/Cmd 多选，但行为和单选完全不同：提交时会变成数组（如 framework=react&framework=vue），后端要按数组接收。
注意：加了 multiple 后，浏览器默认显示为滚动列表（高度约 4 行），不是下拉箭头样式，容易让用户困惑“这还是下拉框吗？”
- 必须显式设
size属性控制可见行数，比如size="3"，否则有些浏览器可能只显示一行还带滚动条 - 移动端不推荐用
multiple—— iOS Safari 的多选交互反直觉，用户很难发现要长按或双指操作 - 如果真需要多选 + 下拉形态，得用 JS 模拟，原生
不提供下拉展开效果
为什么 disabled 和 readonly 都不能用在
只认 disabled，不支持 readonly —— 写了也无效。这是 HTML 规范定死的，跟 不同。
常见坑是复制粘贴其他表单代码时顺手写了 readonly，结果发现禁用不了，还以为是 CSS 或 JS 干扰。
- 禁用整个下拉框：用
，它会变灰、不可点、不提交值 - 想“视觉禁用但保留提交值”？不行。原生
没有这种模式，只能 JS 拦截事件 + 灰色样式模拟 - 禁用某个
而非整个下拉框：加disabled到标签上，例如
怎么用 JS 动态操作 select 的选中项
核心就两个属性：select.value 读写当前选中值（单选），select.selectedOptions 获取所有被选中的 元素（多选）。
别再遍历 options 数组手动设 selected = true，既慢又容易出错。
- 设置单选：直接赋值
select.value = "vue"，浏览器自动高亮对应 - 获取多选结果：
Array.from(select.selectedOptions).map(opt => opt.value) - 监听变化：用
change事件，不是input——不触发input - 动态增删选项：用
select.add(new Option("text", "value"))最安全，比 innerHTML 拼接少出错
复杂点在于，如果下拉框是异步加载选项（比如从接口取城市列表），务必等 DOM 渲染完成后再操作 value，否则可能赋值失败——这时候得用 setTimeout 或 requestAnimationFrame 延迟一下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
