基础下拉框用包裹即可，name属性必填，value需唯一；多选加multiple属性但默认显滚动列表；select仅支持disabled不支持readonly；JS操作用value和selectedOptions属性。
怎么用 <select></select> 写基础下拉框
直接写 <select></select> 标签，里面套 <option></option> 就能跑起来，浏览器默认渲染成下拉列表。不需要 JS、不用框架，纯 HTML 就够用。
常见错误是漏掉 name 属性——表单提交时后端收不到值；或者把 value 写成空字符串或重复值，导致提交逻辑错乱。
-
<select name="category"></select>必须带name，否则提交时这个字段不会出现在请求体里 - 每个
<option value="xxx"></option>的value应该唯一且有意义，别全用"1"、"2" - 默认选中用
selected属性：<option value="js" selected>JavaScript</option>
<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 模拟，原生
<select multiple></select>不提供下拉展开效果
为什么 disabled 和 readonly 都不能用在 <select></select> 上
<select></select> 只认 disabled，不支持 readonly —— 写了也无效。这是 HTML 规范定死的，跟 <input> 不同。
常见坑是复制粘贴其他表单代码时顺手写了 readonly，结果发现禁用不了，还以为是 CSS 或 JS 干扰。
- 禁用整个下拉框：用
<select disabled></select>，它会变灰、不可点、不提交值 - 想“视觉禁用但保留提交值”？不行。原生
<select></select>没有这种模式，只能 JS 拦截事件 + 灰色样式模拟 - 禁用某个
<option></option>而非整个下拉框：加disabled到<option></option>标签上，例如<option value="beta" disabled>Beta 版本</option>
怎么用 JS 动态操作 select 的选中项
核心就两个属性：select.value 读写当前选中值（单选），select.selectedOptions 获取所有被选中的 <option></option> 元素（多选）。
别再遍历 options 数组手动设 selected = true，既慢又容易出错。
- 设置单选：直接赋值
select.value = "vue"，浏览器自动高亮对应<option></option> - 获取多选结果：
Array.from(select.selectedOptions).map(opt => opt.value) - 监听变化：用
change事件，不是input——<select></select>不触发input - 动态增删选项：用
select.add(new Option("text", "value"))最安全，比 innerHTML 拼接少出错
复杂点在于，如果下拉框是异步加载选项（比如从接口取城市列表），务必等 DOM 渲染完成后再操作 value，否则可能赋值失败——这时候得用 setTimeout 或 requestAnimationFrame 延迟一下。
