最简可用下拉菜单需用<select>包裹多个<option>，且<select>必须有name属性，每个<option>应设value值，用selected指定唯一默认项，禁用单个选项用<option disabled>，禁用整体则加disabled到<select>上。

怎样用 select 和 option 写出可用的下拉菜单

直接能用的下拉菜单，核心就两样：select 容器 + 若干 option 子项。不需要 JavaScript 就能渲染，但想让它真正“可用”，得注意几个关键点：

• select 必须有 name 属性，否则表单提交时这个值不会被发送（后端收不到）
• 每个 option 应该有 value 属性，它才是提交时实际传递的值；option 标签内的文本只是显示内容
• 想默认选中某一项，给对应 option 加 selected 属性，而不是写在 select 上
• 避免把空格或换行写进 option 文本里——浏览器可能把它当空白字符渲染，导致选项文字前/后多出空格

为什么 select 提交时总是空值或默认第一项

常见于忘记设 value 或误设了 selected。比如：

<select name="city">
  <option>北京</option>
  <option value="sh">上海</option>
</select>

这段代码中，第一项没 value，提交时它的值是空字符串；第二项虽有 value，但没 selected，用户不手动点一下，它根本不会被选中。更隐蔽的问题是：如果多个 option 都写了 selected，浏览器只认第一个。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 检查所有 option 是否都有明确的 value（哪怕值和文本一样，也建议显式写出）
• 确保最多只有一个 option 含 selected 属性
• 若想默认“不选任何项”，可加一个禁用且选中的占位 option：<option value="" disabled selected>请选择</option>

如何让 select 支持多选或搜索

原生 select 的 multiple 属性能让用户按 Ctrl/Cmd 多选，但它会强制变成列表样式（不是下拉），体验和常见“带搜索的下拉”完全不同。真要搜索+下拉，必须借助 JS 库（如 Select2、Choices.js）或自己实现：

• 加 multiple 属性后，name 值会变成数组（如 name="tags[]"），后端需按数组接收
• 原生 select 不支持键盘输入搜索，size 属性只能控制可见行数，不能替代搜索
• 如果只是需要“单选+搜索”，别硬改原生标签——用 input + 下拉面板 + 列表过滤更可控，也更符合现代交互预期

移动端上 select 的行为差异和兼容提示

iOS 和 Android 系统对 select 的渲染完全不同：iOS 弹出的是滚轮选择器，Android 多为模态列表。这意味着你没法用 CSS 精确控制它的下拉箭头、高度或滚动条。

• 不要给 select 设 height 或 padding 试图“美化”下拉框——这些只影响外框，内部选择器样式完全不可控
• 避免监听 click 事件来模拟打开逻辑，移动端 select 的触发机制和桌面端不同，容易失效
• 如果项目要求高度定制化外观（比如图标、分组、禁用项灰显），原生 select 几乎无法满足，得换方案

最常被忽略的一点：disabled 状态在不同系统里视觉反馈不一致，有的变灰，有的只是不可点但颜色不变——测试时一定真机验证，别只看 Chrome 模拟器。