SPT术语库

选择器 Select

用户在发布计划中为一次发布选择目标环境,答案必须来自产品允许的固定集合。

前端与交互约 10 分钟 · 从真实需求理解

1Select 解决的选择问题是什么?

Select · 固定选项发布计划 · 环境配置

从产品允许的环境集合中保留一个发布目标。

Select 是一个从有限候选集合中承接当前值的单选控件。用户先看到字段的用途,再打开列表,从产品允许的选项中选出一个值;选中后,字段本身要保留这个结果。

它适合发布环境、地区、状态这类答案范围已知的字段。Select 不负责让用户输入任意新文本,也不表示多个条件可以同时成立;列表隐藏的是候选呈现方式,不是选择规则。

学习者应该能从页面中确认三件事:字段 label 说明在选什么,触发器能打开哪些候选,选择完成后当前值与候选中的一个保持一致。

2Select 和相邻控件差在哪里?

Select 与 Input 都可能显示一行文字,但 Input 接受用户写入一条未知或自由的值,Select 只允许从已声明的候选中选值。只要输入一个不在允许集合里的字符串就不应成立,优先考虑 Select。

Select 与 Radio 都能表达一选一。Radio 适合选项很少、差异需要同时可见的决定;Select 适合候选较多、较长,或页面需要把选项收进按需展开的列表。两者的答案关系相同,主要差别是候选的呈现和比较成本。

Select 也不是 Checkbox 的替代品。Checkbox 允许邮件、站内信等多个独立值同时成立;单值 Select 每次只能回填一个当前值。若产品确实需要多选,应明确采用多选模式并重新设计反馈,不要用普通 Select 假装支持并选。

3一个 Select 由哪些真实部分组成?

可选环境预发布线上灰度线上全量

Select 不是一个孤立的下拉箭头,而是字段语境、可操作的 combobox 触发器、展开后的 option 列表和当前选中值之间的关系。用户需要知道自己在选择什么,也需要看到选择后字段留下了什么。

  • 持久 label 说明候选集合服务于哪个字段,不能只依赖空值时的 placeholder。
  • 触发器是可聚焦、可展开的真实控件,要能表达当前值和列表是否打开。
  • option 列表只呈现允许的候选;每个 option 的文字要足够具体,选中状态不能依赖颜色 alone。
  • 当前值回到触发器后仍然可读,并且与候选中的一个值保持对应;键盘用户也能打开、移动和确认选择。

4什么时候用 Select,什么时候改用相邻控件?

发布环境来自固定集合

一个允许值从按需展开的候选列表中回到字段。

选择结果会回到当前字段。
不建议这样用工单优先级很少且需要比较

三个互斥答案都应直接可见,改用 Radio。

工单优先级
不建议这样用通知渠道可以同时开启

每个渠道都能独立保留,改用 Checkbox。

通知渠道

先判断答案关系和候选呈现:固定集合中的一个值适合 Select;少量互斥答案且需要并列比较时改用 Radio;多个独立条件可以同时成立时改用 Checkbox。

5怎样把 Select 需求告诉 Agent?

请在发布计划表单中提供一个有持久 label 的单值 Select,用于选择发布环境;候选只能是预发布、线上灰度和线上全量,打开后让用户用鼠标或键盘确认一个值,选择完成后触发器继续显示当前环境。请使用真实 combobox/listbox/option 语义,保留清楚的焦点和展开状态,窄屏下自然换行且不产生横向溢出。不要把它做成可以输入任意文字的 Input,也不要让多个通知渠道共用一个 Select;验收时检查候选范围、唯一当前值、键盘操作和 label 绑定。

6不用背,看看你能不能判断

1 / 3

发布环境只能从产品允许的固定集合中选一个时,Select 的主要责任是什么?

请选择一个最符合题意的答案

选择答案后自动进入下一题

社区延伸

看别人真实遇到过什么

社区帖子还没有关联到这个词条。