选择框元件 #
选择框元件显示一个选项列表,用户可以从中选择一个或几个选项。选择框元件位于 Default 元件库的 Forms 部分。
添加、删除和重新排序选择框选项 #
要在选择框中添加和编辑选项,请双击画布上或 Outline 面板中的选择框元件,打开 Edit List Box 对话框。你可以通过点击 Add ,并在出现的字段中输入新选项的文本,向选择框中添加一个单一的选项。或者,你也可以通过点击 Edit Many ,一次在选择框中添加几个新的选项。
要对选择框中的选项重新排序,选择一个选项并使用对话框顶部的 Up 和 Down 按钮。要删除一个选项,选择它并点击 Delete ,或者点击 Edit Many ,并清除文本区域,一次性删除所有选项。
允许多重选择 #
选择框可以允许多个选择,但你必须先启用这个设置。要允许多选,请双击选择框,并在 Edit List Box 对话框的底部勾选 Allow multiple items to be selected by default 。
一旦启用这一设置,你就可以在浏览器中通过按住 CTRL 或 CMD 同时点击几个选项来选择多个选项。
定义一个默认的选项 #
通常情况下,选择框在浏览器中默认没有选择任何选项,但你可以在 Edit List Box 对话框中改变这一点。双击选择框元件,然后在对话框中勾选某个选项旁边的方框。
注意
如果你启用了多个选择,你可以定义多个默认选项。
特殊属性 #
禁用 #
禁用一个选择框可以防止用户在浏览器中与它交互。这也会激活元件的 禁用样式 (opens new window) ,使它看起来是灰色的。
有两种方法可以禁用一个元件。
检查 Interactions 面板底部的 Disabled 复选框。
用 Enable/Disable 动作在浏览器中动态地禁用该元件。你可以作为任何交互的一部分来做,比如当页面加载或点击按钮时。
提示
你可以用 Enable/Disable 动作在网页浏览器中动态地启用一个被禁用的Widgets(元件)。
特殊的 Interactions(交互) #
选择列表选项 #
在浏览器中,你可以点击选择框中的选项来选择它。如果你启用了多重选择功能,你可以在点击的同时按住 CTRL 或 CMD 来选择多个选项。
提交按钮 #
当选择框在浏览器中拥有焦点时按下回车键,可以触发页面上另一个元件的 Click or Tap 事件,也就是选择框的 “提交按钮”。
要为一个选择框指定一个提交按钮。
选择选择框,在 Interactions 面板的下部点击 Show All 。
在 Submit Button 下拉菜单中,从符合条件的元件列表中选择。
要取消提交按钮,请点击下拉菜单底部的 Unassign Submit Button 。
限制和解决方法 #
动态添加和删除选择框选项 #
选择框中可用的选项不能在网页浏览器中动态改变,但你可以通过制作一个具有多个状态的动态面板,每个面板都包含一个具有不同内容的列表框来模拟这种效果。当你想改变选择框中的选项时,切换动态面板的状态。
设置或读取多个选择项 #
在使用 “设置选定列表选项” 操作动态设置列表框的选定选项时,只能选择一个选项; 不可能通过交互同时选择多个选项。
同样,即使已选择了多个选项,也只能通过 “交互和条件” 中的 “值的选定选项” 选项从列表框中读取一个选定选项 (最顶部的选项)。
要解决这些限制,请使用形状小部件创建一个自定义列表框。
标签顺序 #
选择框和其他窗体元件的标签顺序是由它们的层深度决定的,如 Outline 面板中所示。你可以在 组织元件 (opens new window) 文章中了解更多关于这个问题以及如何改变一个元件的标签顺序。