下拉列表指南

用户使用下拉列表可以在值列表中作出选择。下拉列表是选定的项目始终可见、其他项目在需要时通过单击下拉按钮才显示的列表。在 HTML 中,下拉列表称为采用浮出模式的选择控件。在 XAML 中,下拉列表称为组合框。通过下拉列表,用户可以选择一个且只能选择一个选项。

你也可以创建一个无需任何其他交互即可显示所有项目的列表。它既支持单选,也支持多选。在 HTML 中,此类列表称为采用内联模式的选择控件。在 XAML 中,该列表称为列表框。有关详细信息,请参阅列表框(或选择)指南

标准下拉列表控件的外观示例

示例

下面是一个下拉列表示例。仅当用户选择下拉按钮时,列表中的项目才可见。

用于展示标准下拉列表控件的必应美食应用的屏幕截图

下面是一个列表框示例,该列表中的所有项目始终可见。

这是正确的控件吗?

使用下拉列表控件可让用户从一组项目中选择单个值,这些项目使用单独一行文本充分显示。

请勿使用该控件显示包含多行文本或图像的项目。请改用列表视图或网格视图

当少于 5 个项目时,考虑使用单选按钮(如果只能选择一个项目)或复选框(如果可以选择多个项目)。

当选择项在应用流中不太重要时使用下拉列表。 如果在多数情况下为大部分用户推荐了默认选项,则通过使用列表框显示所有的项可能会导致用户对选项进行不必要的注意。使用下拉列表可以节省屏幕空间并减少分心。

建议

  • 将下拉列表项目的文本内容限制为单行。
  • 按逻辑顺序排序下拉列表的项目,例如将相关的选项组合在一起,优先放置最常用的选项,或者使用字母顺序。按字母顺序排序名称,按数字顺序排序数字,并按时间先后顺序排序日期。
  • 在内容的右侧添加 27 个像素的边距可以防止滚动条与内容重叠。(默认情况下,控件包含此边距。)

相关主题

对于设计人员

列表框(或选择)指南

浮出控件指南

消息对话框指南

单选按钮指南

复选框指南

切换开关指南

网格视图和列表视图指南

语义式缩放指南

滑块指南

设置 UI 的布局

对于开发人员 (XAML)

ComboBox class

添加组合框和列表框

对于开发人员 (HTML)

select element | select object

添加选择控件