下拉选择

Select

也常被叫作：下拉框下拉菜单选择器选项列表那个点了往下弹的框Dropdown

界面与组件通常止于「主路径」约 1 分钟读完

你可能会这么说

「页面上有个框，点它弹出一列选项，用户从里面挑一个，比如选城市、选月份、选套餐。」

下拉选择 Select

让用户从你给定的选项里挑一个的控件，用户不能随便填，只能在你给的里面选。

下拉选择（Select）是从给定的一组选项里选一个值的控件：城市、月份、套餐、状态。它和输入框的根本区别是封闭 vs 开放——输入框里用户爱写什么写什么；下拉里用户只能在你给的选项里挑。所以适用条件是「选项数量有限且预先可知」：三五个到二十来个最合适。选项只有两三个时，用下拉反而多一次点击，直接摆出来（单选按钮组）更直观。

下拉最常翻车的三个点。第一，选项太多不设搜索——选城市要从几百项里翻，必须做成可搜索的下拉。第二，默认显示第一项，让用户以为选过了——第一项应该是「请选择」这种占位，没选过和选过要分得清，否则用户没操作就被提交了一个默认值。第三，选项文案看不懂——「选项 1」「A」这种，用户根本不知道选的是什么。

移动端特别提醒：用原生下拉。原生下拉在手机上会调起系统的选择器（滚轮、列表），这是用户最熟悉的手势。为了好看换成自定义下拉，很容易出现点不开、滚不动、选不中的问题。另外下拉也要键盘可用：Tab 能聚焦、方向键能选、回车能确认。

长什么样真实可交互，不是截图

所在城市

这里是静态示意：真实下拉是点一下框、弹出选项、再点选项选中的过程。注意第一项是「请选择」而不是默认选中北京——用户没选过和选了要分得清。

拆开看，里面有这几块

1
触发器（框体） Trigger
显示当前选中值或「请选择」占位，点击展开选项列表。
2
选项列表 Options
弹出的选项集合，选项多时要能滚动或搜索。
3
选项 Option
每一项代表一个可选值，文案要能自己说清含义，不许用「选项 1」。
4
占位项 Placeholder
「请选择」这类提示，表示用户还没选，防止默认选中骗过用户。
5
状态 State
未选 / 已选 / 展开 / 禁用，每种都要能一眼区分。

常见的有哪几种

原生下拉Native Select

系统自带，移动端调起原生选择器，键盘天然可用。

用在：表单、设置项

可搜索下拉Searchable

输入文字过滤选项，几百项也不怕。

用在：选城市、选用户、选文件

多选下拉Multi-select

一次选多个值，会显示已选标签。

用在：打标签、多条件筛选（慎用，容易看不出选了啥）

容易搞混？这样区分

下拉选择 ≠ 输入框 Input

下拉是封闭的——值只能从你给的选项里挑；输入框是开放的——用户说什么都行。值有限且预先知道，用下拉；值完全开放，用输入框。

看输入框

下拉选择 ≠ 单选按钮 Radio

选项只有两三个时，直接摆出来用单选按钮：一眼看到全部选项、少一次点击；下拉把选项藏起来，适合选项多、不想占版面的时候。

什么时候用得上

表单选城市

选项多时用可搜索下拉，选项少直接摆出来，未选时显示「请选择」。

设置页选语言

固定几个选项用原生下拉，移动端调起系统选择器。

筛选器选状态

下拉 + 清楚的状态文案，筛选结果和所选值对得上。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【范围】只改 [这个表单/页面] 里的下拉选择，不动其他控件和整体布局
【要求】
  - 下拉的选项是我提供的固定列表：[列出具体选项]，用户不能自己乱填
  - 未选择时显示「请选择」，不要默认选中第一项当作已选
  - 每个选项的文案要说人话、能自己看懂，不许用「选项 1」
  - 超过 15 个选项要支持输入文字过滤，不用从长列表里翻
  - 键盘可用：Tab 能聚焦、方向键能选、回车能确认
  - 移动端用原生下拉（会调起系统选择器），不要自定义实现
【边界】不要改选项背后的数据；不要新增第三方组件库；不要改其他字段
【交付】告诉我改了哪些文件、我打开哪个页面怎么操作能选一次值、选中后提交的值是什么、以及哪部分你没验证

这段话最硬的三条：「选项是固定列表不能乱填」「不要默认选中第一项」「移动端用原生下拉」。前两条防数据脏，第三条防手机上点不开——都是 AI 最爱偷懒的地方。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

点下拉能展开，出现的选项和你给的列表一致，没有多出来也没有少。
没选时显示「请选择」；选中后框里显示的是你选的那个值。
试着在下拉里打字输入选项以外的东西——应该输入不了。
只用键盘：Tab 聚焦、方向键选、回车确认，能完成一次选择。
选项多的下拉，输入文字能过滤出想要的选项。
手机尺寸下点下拉，弹的是系统选择器，能正常滚、正常选。

它常这么糊弄你

「下拉已做好」——但它是用输入框冒充的，用户能打任意内容，提交的可能是乱填的字。
「选项都加了」——但显示的是「选项 1」「A」，用户不知道选的是啥。
默认选中第一项，用户没操作也算选过了，提交了错误数据——要求「请选择」占位。
自定义下拉在手机上点不开、滚不动——必须用原生下拉。
「键盘能用」——但 Tab 根本到不了下拉，或者焦点一进去就丢了。

下拉能验到「主路径」层：你亲手展开一次、键盘走一遍、手机尺寸点一下，就验完了。凡是能亲手点的，别接受「已完成」的口头汇报。

考考你选一个你觉得对的

表单里要选「所在城市」，全国几百个城市。最合适的做法是？

想再深挖一点靠谱出处

<select>：下拉选择元素MDN ↗

# 下拉选择 (Select)

> 让用户从你给定的选项里挑一个的控件，用户不能随便填，只能在你给的里面选。

**你可能会这么说**：页面上有个框，点它弹出一列选项，用户从里面挑一个，比如选城市、选月份、选套餐。

下拉选择（Select）是从给定的一组选项里选一个值的控件：城市、月份、套餐、状态。它和输入框的根本区别是封闭 vs 开放——输入框里用户爱写什么写什么；下拉里用户只能在你给的选项里挑。所以适用条件是「选项数量有限且预先可知」：三五个到二十来个最合适。选项只有两三个时，用下拉反而多一次点击，直接摆出来（单选按钮组）更直观。 下拉最常翻车的三个点。第一，选项太多不设搜索——选城市要从几百项里翻，必须做成可搜索的下拉。第二，默认显示第一项，让用户以为选过了——第一项应该是「请选择」这种占位，没选过和选过要分得清，否则用户没操作就被提交了一个默认值。第三，选项文案看不懂——「选项 1」「A」这种，用户根本不知道选的是什么。 移动端特别提醒：用原生下拉。原生下拉在手机上会调起系统的选择器（滚轮、列表），这是用户最熟悉的手势。为了好看换成自定义下拉，很容易出现点不开、滚不动、选不中的问题。另外下拉也要键盘可用：Tab 能聚焦、方向键能选、回车能确认。

**也叫**：下拉框、下拉菜单、选择器、选项列表、那个点了往下弹的框、Dropdown

## 你可以这样告诉 AI

```text
【范围】只改 [这个表单/页面] 里的下拉选择，不动其他控件和整体布局
【要求】
  - 下拉的选项是我提供的固定列表：[列出具体选项]，用户不能自己乱填
  - 未选择时显示「请选择」，不要默认选中第一项当作已选
  - 每个选项的文案要说人话、能自己看懂，不许用「选项 1」
  - 超过 15 个选项要支持输入文字过滤，不用从长列表里翻
  - 键盘可用：Tab 能聚焦、方向键能选、回车能确认
  - 移动端用原生下拉（会调起系统选择器），不要自定义实现
【边界】不要改选项背后的数据；不要新增第三方组件库；不要改其他字段
【交付】告诉我改了哪些文件、我打开哪个页面怎么操作能选一次值、选中后提交的值是什么、以及哪部分你没验证
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 点下拉能展开，出现的选项和你给的列表一致，没有多出来也没有少。
- [ ] 没选时显示「请选择」；选中后框里显示的是你选的那个值。
- [ ] 试着在下拉里打字输入选项以外的东西——应该输入不了。
- [ ] 只用键盘：Tab 聚焦、方向键选、回车确认，能完成一次选择。
- [ ] 选项多的下拉，输入文字能过滤出想要的选项。
- [ ] 手机尺寸下点下拉，弹的是系统选择器，能正常滚、正常选。

常见糊弄：
- 「下拉已做好」——但它是用输入框冒充的，用户能打任意内容，提交的可能是乱填的字。
- 「选项都加了」——但显示的是「选项 1」「A」，用户不知道选的是啥。
- 默认选中第一项，用户没操作也算选过了，提交了错误数据——要求「请选择」占位。
- 自定义下拉在手机上点不开、滚不动——必须用原生下拉。
- 「键盘能用」——但 Tab 根本到不了下拉，或者焦点一进去就丢了。

来源：https://mickerbook.com/reference/t/select/