请选择城市上海北京杭州

怎么用 和 写出可用的下拉列表

直接写就行，不需要额外 JS 或库。核心是 包住多个 ，每个 的 value 属性决定表单提交时的实际值，text（标签内容）才是用户看到的选项文字。

常见错误：把 value 漏掉或写成空字符串，结果后端收不到值；或者把中文直接塞进 value（虽然能用，但不推荐，易编码/空格问题）。

• 上海 北京
• 必须加 name 属性，否则提交时这个字段不会被包含
• 第一个 建议设为提示项，比如 请选择城市 —— 注意 disabled 会让它无法被选中，selected 让它默认显示

如何让某个选项默认被选中

靠 selected 属性，不是靠顺序、不是靠 JS 设置、也不是靠 CSS 样式。只在 HTML 里给对应 加上 selected 就行。

容易踩的坑：selected="true" 或 selected="selected" 是冗余写法，HTML5 只要存在这个属性就生效；另外，如果多个 都写了 selected，浏览器只认第一个。

• 正确：杭州
• 错误：杭州（无效属性值，但不报错）
• 错误： 下用 selected 是合法的，但用户得按 Ctrl/Cmd 多选，别误以为是单选增强版

为什么下拉列表提交后值为空或不对

90% 是因为没搞清 value 和显示文本的关系。表单提交的永远是 的 value，不是里面写的字。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

典型场景：后端接口要求传 status=active，但你写了 启用，结果提交的是中文，后端解析失败。

• 检查浏览器开发者工具的 Network → Form Data，确认实际发送的键值对
• 避免在 value 中使用空格、中文、特殊符号；用短横线或下划线代替空格，如 in-review 而非 in review
• 如果选项来自 JS 动态生成，确保每个 option 元素都设置了 value，不要只设 textContent

支持多选的 怎么用才不出错

加 multiple 属性后，用户可以按 Ctrl/Cmd（Mac）或多点触控长按选择多个，但表单提交行为会变：同名字段变成数组形式（如 hobby[]=reading&hobby[]=coding），后端需按数组处理。

兼容性没问题，所有现代浏览器都支持，但 UX 上要注意——默认样式在桌面端不显眼，用户可能根本不知道能多选；移动端则通常自动弹出复选框列表。

• 必须显式设置 size 属性（如 size="4"），否则多数浏览器只显示一行，看不出可多选
• 不能和 required 混用：如果设了 required，至少一个选项必须被选中；但如果没设 selected，初始状态就校验失败
• JS 获取值要用 selectElement.selectedOptions，而不是 selectElement.value（后者只返回第一个选中项）

最常被忽略的一点：下拉列表的语义价值远大于样式。别为了“好看”用 div + JS 重写 ，除非你真能完整实现键盘导航（Tab/Arrow/Enter）、屏幕阅读器支持、表单验证联动——否则只是给自己埋兼容性和可访问性雷。

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