select 标签必须设置 name 属性才能提交数据，option 应显式定义 value 避免中文或文案变更引发解析错误；multiple 时提交格式为多个同名参数或逗号分隔；required 与 disabled 不可共存，动态初始化需同步 selectedindex 和 value。

select 标签不是“用不用”的问题，而是“怎么用对”——漏掉 name 属性，表单提交时它就等于不存在；没设 value 的 option，选中后传给后端的可能是空字符串或文本内容，极易引发解析错误。

必须带 name 才能提交数据

浏览器只把带 name 属性的表单控件值打包进请求体。如果写成 <select><option>A</option></select>，提交时这个字段压根不会出现在 FormData 或 URL 查询参数里。

• name 值要和后端约定一致，比如后端期待 category，那就写 <select name="category"></select>
• 多选场景下（带 multiple），name 值仍为单个字符串，但服务端需按数组或逗号分隔方式解析
• 别用 id 替代 name——id 只用于 DOM 定位或 label[for] 关联

option 的 value 不写会怎样

每个 option 默认把标签内文本作为提交值。比如 <option>苹果</option> 被选中后，实际发送的是 "苹果"。这在中文环境容易出问题：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 前后空格、全角/半角字符差异会让后端匹配失败
• 显示文案改了（如“苹果”→“红富士苹果”），但逻辑依赖旧值，直接崩
• 推荐显式写 value：<option value="apple">苹果</option>，前后端各管各的

单选 vs 多选：行为差异不止在 UI

加了 multiple 属性后，用户可按 Ctrl/Cmd 多选，但提交格式彻底改变：

• 单选：name=apple（URL 编码后）
• 多选：name=apple&name=banana（传统 form 提交）或 name=apple,banana（某些框架自动拼接）
• JavaScript 读取时，单选用 select.value，多选必须遍历 select.options 并检查 selected 状态
• size 属性只影响可见行数（如 size="4" 显示 4 行），不改变单/多选逻辑

required 和 disabled 别混用

两者都影响表单校验，但作用完全不同：

• required：用户必须选一个非空 option（第一个 option 最好设 value="" 并加 disabled selected 当占位提示）
• disabled：该控件不参与提交，也不触发 change 事件，且灰色不可交互
• 同时加 required 和 disabled 会导致校验失效——浏览器直接跳过这个字段
• 想“视觉禁用但保留提交”，该用 readonly？不行，select 不支持 readonly，得靠 JS 拦截操作 + CSS 模拟状态

最常被忽略的其实是初始化逻辑：动态渲染 select 后，如果用 JS 设置默认选中项，别只改 option.selected = true，还得同步更新 select.selectedIndex 或 select.value，否则部分老浏览器可能不触发 change 事件。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！