动态设置下拉列表选项 | Dynamically Set Droplist Options

根据第一个下拉列表的选项,第二个下拉列表显示不同的选项。

STEP0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP1:开始

(注意:虽然在Axure RP中无法动态设置下拉列表中的选项,但是可以是用动态面板和下拉列表元件来模拟这种行为。)

在练习文件中打开“动态设置下拉列表”页面以便在画布中进行编辑。

页面上的表单用于给员工选择一个新的工作岗位,不同的部门有不同的工作岗位,基于第一个下拉列表的选择,第二个下拉列表会有不同的选项。

首先,该页面包含一个“部门”下拉列表,下拉列表中有三个选项:运营部、销售部、开发部,每一个选项都对应一个下级下拉列表,每个下级下拉列表都有两个选项,即该部门的岗位名称。

STEP2:创建动态面板

右键点击第一个“岗位”下拉列表(显示“行政助理”选项的那个),然后点击“转为动态面板”。

在检视窗口顶部的文本框中,设置该动态面板的名称为“岗位”。

在属性页签下,点击“自动调整为内容尺寸”的复选框。

双击这个动态面板打开动态面板状态管理器。

点击两次绿色的“+”图标添加两个新的状态(总共三个状态)。

在每个状态名称上缓慢的双击来修改状态名称,三个状态的名称以此修改为“运营部”、“销售部”、“开发部”。

最后,将“销售部”和“开发部”连个下拉列表分别剪切/粘贴到对应的动态面板状态中,确保位置坐标位(0,0)。

STEP3:根据第一个下拉列表的选项切换动态面板状态

回到“动态设置下拉列表”页面,单击“部门”下拉列表元件,在属性页签下,双击“选项改变时”来创建一个新的选项改变时用例。

在左侧“添加动作”栏,点击“设置面板状态”动作。

在右侧“配置动作”栏,选择“岗位”动态面板。

在这一栏的底部,找到“选择状态”下拉列表,并设置它的选项为“Value”。

点击文本框后面的“fx”按钮。

在“局部变量”区域点击“添加局部变量”,然后修改第一个下拉列表的选项为“被选项”。

在后面的下拉菜单中选择“当前元件”(会显示为This)。

在该对话框的顶部文本框中,删除自动带出的数字“1”,然后点击“插入变量或函数”。

在“局部变量”下,点击“LVAR1”。

点击“确定”按钮关闭编辑值窗口,然后再次点击“确定”按钮关闭用例编辑器。

STEP4:预览

点击预览。

尝试点击第一个下拉列表中的选项,根据不同选项,观察各种动态面板状态下的不同下拉列表。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。