返回知识库

界面与交互 · 操作与输入

选择器Select

打开一个有限且可比较的列表,选一个值;当前选中值始终可见,不可选项说明原因。

打开列表选一个值:结果立刻长在报名卡上

选择器先打开一个有限且可比较的列表,确认后只保留一个值。亲手操作触发器、列表、禁用项和必选校验,观察报名摘要怎样即时变。

第 0 步:这是「活动报名」的城市选择区。点触发器(或用 Enter / 方向键)打开列表, 观察「当前值始终在触发器可见」「名额满的城市留下但禁用」「选择立即更新报名摘要」三件事。

对照:触发器显示占位,列表尚未展开。原因:选择器要先打开有限列表再选一个值。下一步:点触发器或用 Enter / 方向键打开列表。

报名摘要 · 随选择即时变未选择城市
可报名场次
当前状态
未选择

改选任一城市,触发器与这份摘要会一起变——结果长在物件上,不只靠底部说明。

面板教会的知识点

把刚才操作里看到的现象命名为六条规则。

  • 有限列表:打开后所有可比较的选项集中在同一列,用户扫描而不是回忆。
  • 当前值始终可见:触发器始终显示已选城市;不用打开就知道选了什么。
  • 不可选项说明原因:名额满的成都留在列表里,但禁用并标注「已满」,不是悄悄消失。
  • 选择立即生效:选中后触发器与报名摘要同时更新;不必再点确认才生效。
  • 占位不是值:未选时触发器是灰字「请选择」,提交会被锁并指明下一步。
  • 键盘完整可操作:Enter / 方向键打开与移动,Enter 确认,Esc 取消,焦点环清晰。

什么时候用选择器

从选项数量和是否可比较判断,而不是看控件长什么样。

适合

选项互斥、数量有限(约 4–12 项)、格式一致——活动城市、排序方式、套餐档位。

先别用

选项很多需搜索(→ 自动完成)、要并行看到全部对比(→ 单选框)、或任意文本(→ 输入框)。

怎么用:从标签到重置

最短路径——标签、触发器、列表、必选校验一次到位。

  1. 用 label 写清在选什么;触发器显示当前值或占位,不靠记忆。
  2. 列表打开时按可比较的顺序排列;不可选项 disabled 并标注原因,不要删掉。
  3. 键盘走一遍:Enter / 方向键打开与移动,Enter 确认,Esc 关闭,Tab 离开时自动收起。
  4. 若必选:未选时提交要锁,并在字段边框与说明上指出原因和下一步。

正反例:同一个「选配送城市」需求

只改一个关键判断——选项数量是否在可扫描范围。

正例

5–8 个可报名城市 → 下拉选择器。触发器显示当前城市,名额满的留下但禁用并标注。

反例

把全国 300 多个城市全塞进一个选择器、无搜索无分组 → 用户找不到目标;应改用带搜索的自动完成。

快速自测

收货地址需要在全国 300 多个城市里定位,最合适的控件是?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。