下拉列表元件 #

下拉列表或叫做下拉菜单 -- 是一个可切换的列表,它包含几个选项,每次只能选择其中一个。下拉列表元件位于 Default 元件库的 Forms 部分。

当你想让用户从许多可能的答案中选择一个问题的单一答案时,在用户输入表单中使用一个下拉列表元件。例如,从世界上所有国家中选择一个国家,通常用一个下拉列表来完成。

添加、删除和重新排序下拉列表选项 #

要在下拉列表中添加和编辑选项,请双击画布上或 Outline 面板中的下拉列表元件,打开 Edit Droplist 对话框。你可以通过点击 Add ,并在出现的字段中输入新选项的文本,向下拉列表中添加一个单一的选项。或者,你也可以通过点击 Edit Many ,一次向下拉列表添加几个新的选项。

要对下拉列表的选项重新排序,选择一个选项并使用对话框顶部的 UpDown 按钮。要删除一个选项,选择该选项并点击 Delete ,或者点击 Edit Many ,并清除文本区域以一次性删除所有选项。

定义默认选项 #

通常情况下,下拉列表中的第一个选项将作为默认选项出现。因此,如果你想让一个选项成为默认选项,你可以把它移到列表的顶部。

但是,如果你想让一个较低的选项成为默认值,请在 Edit Droplist 对话框中勾选它旁边的方框。这将使选中的选项成为默认选项,而不是第一个选项。

提示

要在下拉列表中添加一个 blank 默认选项,请输入一个空格字符作为选项的文本。

特殊属性 #

禁用 #

禁用一个下拉列表可以防止用户在浏览器中与它交互。这也会激活元件的 禁用样式 (opens new window) ,使它看起来是灰色的。

有两种方法可以禁用一个元件。

  • 检查 Interactions 面板底部的 Disabled 复选框。

  • Enable/Disable 动作在浏览器中动态地禁用该元件。你可以作为任何交互的一部分来做,比如当页面加载或点击按钮时。

提示

你可以用 Enable/Disable 动作在网页浏览器中动态地启用一个被禁用的Widgets(元件)。

特殊的Interactions(交互) #

选择一个列表选项 #

在浏览器中,你可以点击一个下拉列表来打开它并选择一个选项。

你也可以用 Set Selected List Option action (opens new window) ,动态地改变下拉列表中的选定选项。你可以选择一个特定的列表选项,或者用 variable value (opens new window) ,设置新的选定选项。

吸附和评估所选方案 #

你可以通过 interactions (opens new window)conditions (opens new window) 中的 selected option of 值选项访问下拉列表的选定选项。例如,你可以将 global variable (opens new window) 的值设置为一个下拉列表的选定选项,以便将该值带到不同的页面。你也可以在一个条件中评估下拉列表的选定选项,这样只有当该选项与一个特定的值相匹配时,某种情况才会发生。

提交按钮 #

当一个下拉列表在浏览器中拥有焦点时,按回车键可以触发页面上另一个元件的 Click or Tap 事件,这被称为下拉列表的 “提交按钮”。

要给一个下拉列表指定一个提交按钮。

  1. 选择下拉列表,在 Interactions 面板的下部点击 Show All

  2. Submit Button 下拉菜单中,从符合条件的元件列表中选择。

要取消提交按钮,请点击下拉菜单底部的 Unassign Submit Button

限制和解决方法 #

动态添加和删除下拉列表 #

下拉列表中的可用选项不能在网页浏览器中动态改变,但你可以通过制作一个具有多个状态的动态面板,每个面板都包含一个内容不同的下拉列表来模拟这种效果。当你想改变下拉列表中的选项时,请切换动态面板的状态。

标签顺序 #

下拉列表和其他窗体元件的标签顺序是由它们的层深度决定的,如 Outline 面板中所示。你可以在 组织元件 (opens new window) 文章中了解更多关于这个问题以及如何改变一个元件的标签顺序。