级联关系存在于各种各样的业务场景中。如省市级联、部门级联、年级班级级联等等。在用Axure 9设计原型时,碰到这种级联关系的下拉选项,该如何操作呢?
直接上步骤:
说明:此例仅演示两层级联关系,多层的级联关系无非是重复操作步骤而已。。
- 新建两个下拉列表,将第一个下拉列表的下拉选项设置两个值:山东、四川。并将第二个列表转换为“动态面板”(选中下拉框,右键菜单中)。
说明:转换为动态面板是为了能够放下不同省对应的市,一个省对应一个动态面板的一个状态
- 双击第二个下拉框,出现编辑“动态面板”页面。然后按图示操作。
点击下图所示“重复状态”,会出现新的State1,将其改名为“四川”。
切记不要点击小面板上的“添加状态”,不然动态面板第二个状态里就没有下拉框。
然后,切换动态面板状态为“山东”的下拉框,添加几个山东的市的下拉选项。同理于状态为“四川”的动态面板。
- 单击选中第一个下拉框,新建交互,选择事件为:选项改变时。
点击确定,完成第一种情形的添加。
同理,添加第二种情形,注意将条件更改为“四川”。完成后如下图。
- 选中情形1,点击左侧“设置面板状态”,在弹框中勾选动态面板,再在右侧的状态中选择“山东”。同理,将情形2的动态面板状态设置为“四川”。
点击确定。
5. 点击主页面“预览”即可在浏览器中看到动态的省市级联效果。