【Axure答疑】按键自动选择上一个或下一个列表选项

有朋友有这样一个疑问：下拉列表怎么通过点击按钮来快速切换上一个或者下一个列表选项。

我们先看看这位同学说的，axure自带的方案是如何的。

一、Axure的自带下拉列表

1、在部件窗口找到“Default-Forms-下拉列表框部件”，将其拖拽到编辑窗口中。

2、双击下拉列表框部件，打开编辑列表选项窗口

3、编辑列表项。点击“+”，编辑选项内容。或者点击“Edit Many”，批量编辑选项内容。

注意，批量编辑时记住一定要每行一个名称。

4、点击确定，完成编辑。

5、点击预览，查看效果。

有两种选择列表项的方式：

A、鼠标单击下拉列表框，打开选项列表，鼠标选择列表项。

B、鼠标单击下拉列表框，打开选项列表。通过电脑键盘中的“上”“下”按键，选择上一个或者下一个列表项内容。

二、通过页面按键选择列表项内容

1、在原来的下拉列表的基础上，增加两个按钮，分别命名为“上”、“下”。按钮的样式根据自己的需要去调整。

2、交互设置

因为不能直接设置选择“上一个”“下一个”列表项，所以，我们需要设置实现“上一个”“下一个”的交互效果。

如果当前默认的列表项是1，点击下一个按钮的时候，列表项选择为2；如果当前的列表项是2，点击下一个按钮的时候，列表项选择为3，这样一次类推。

根据上面的分析，我们可以知道，触发部件是“上”、“下”按钮、条件判断是当前列表项的被选中项、动作为设置列表选中项。

（1）选择“下”按钮，双击鼠标单击时事件，打开用例编辑器。

（2）点击“添加条件”，打开条件生成器。设置条件：if 被选项于 (下拉列表框) == 1

（3）选择的动作为设置列表选中项，将下拉列表的选项设置为2。

（4）以此类推，设置条件：被选项于等于2、3、4的交互设置。为什么不用设置5呢？因为5是最后的一个列表项，没有下一个需要进行切换。

（5）预览看看效果

（6）查看实现效果无误之后，同样的方法设置“上”按钮上的交互。直接复制“下”按钮中的所有部件，进行简单修改即可。

（7）查看最终的完整效果。

下拉列表通过点击按钮来快速切换上一个或者下一个列表选项就实现了。

但是我们注意观察，点击按钮是直接更改了选中的列表，而不是显示对列表项的选择。关于这一点，留给大家思考，可以怎么做到这个效果。

如果得出结论，或者没有头绪没有思路的话，欢迎前来跟我们交流！

点亮，告诉大家你也在看