请选择城市上海北京杭州
怎么用 <select></select> 和 <option></option> 写出可用的下拉列表
直接写就行，不需要额外 js 或库。核心是 <select></select> 包住多个 <option></option>，每个 <option></option> 的 value 属性决定表单提交时的实际值，text（标签内容）才是用户看到的选项文字。
常见错误：把 value 漏掉或写成空字符串，结果后端收不到值；或者把中文直接塞进 value（虽然能用，但不推荐，易编码/空格问题）。
<select name="city"><option value="sh">上海</option> <option value="bj">北京</option></select>- 必须加
name属性，否则提交时这个字段不会被包含 - 第一个
<option></option>建议设为提示项，比如<option value="" disabled selected>请选择城市</option>—— 注意disabled会让它无法被选中，selected让它默认显示
如何让某个选项默认被选中
靠 selected 属性，不是靠顺序、不是靠 JS 设置、也不是靠 CSS 样式。只在 html 里给对应 <option></option> 加上 selected 就行。
容易踩的坑：selected="true" 或 selected="selected" 是冗余写法，html5 只要存在这个属性就生效；另外，如果多个 <option></option> 都写了 selected，浏览器只认第一个。
立即学习“前端免费学习笔记（深入）”；
- 正确：
<option value="hz" selected>杭州</option> - 错误：
<option value="hz" selected>杭州</option>（无效属性值，但不报错） - 错误：
<select multiple></select>下用selected是合法的，但用户得按 Ctrl/Cmd 多选，别误以为是单选增强版
为什么下拉列表提交后值为空或不对
90% 是因为没搞清 value 和显示文本的关系。表单提交的永远是 <option></option> 的 value，不是里面写的字。
典型场景：后端接口要求传 status=active，但你写了 <option value="启用">启用</option>，结果提交的是中文，后端解析失败。
- 检查浏览器开发者工具的 Network → Form Data，确认实际发送的键值对
- 避免在
value中使用空格、中文、特殊符号；用短横线或下划线代替空格，如in-review而非in review - 如果选项来自 JS 动态生成，确保每个
option元素都设置了value，不要只设textContent
支持多选的 <select multiple></select> 怎么用才不出错
加 multiple 属性后，用户可以按 Ctrl/Cmd（Mac）或多点触控长按选择多个，但表单提交行为会变：同名字段变成数组形式（如 hobby[]=reading&hobby[]=coding），后端需按数组处理。
兼容性没问题，所有现代浏览器都支持，但 ux 上要注意——默认样式在桌面端不显眼，用户可能根本不知道能多选；移动端则通常自动弹出复选框列表。
- 必须显式设置
size属性（如size="4"），否则多数浏览器只显示一行，看不出可多选 - 不能和
required混用：如果设了required，至少一个选项必须被选中；但如果没设selected，初始状态就校验失败 - JS 获取值要用
selectElement.selectedOptions，而不是selectElement.value（后者只返回第一个选中项）
最常被忽略的一点：下拉列表的语义价值远大于样式。别为了“好看”用 div + JS 重写 <select></select>，除非你真能完整实现键盘导航（Tab/Arrow/Enter）、屏幕阅读器支持、表单验证联动——否则只是给自己埋兼容性和可访问性雷。