如何使用Axure:[8]制作联动下拉菜单
当我们在注册新用户,或者在使用某些工具软竭惮蚕斗件的时候,会遇到当你从一个下拉菜单中选择一项,后面的下拉菜单会跟着变化的情况。此篇就向大家介绍一下如何实现此类功能。
工具/原料
Axure
制作
1、打开你的Axure,创建一个空白的RP文档。
![如何使用Axure:[8]制作联动下拉菜单](https://exp-picture.cdn.bcebos.com/ff5c88d81819612072e76edd70f202b374d7dfbd.jpg)
2、拖入一个Dropdown,作为一级菜单
![如何使用Axure:[8]制作联动下拉菜单](https://exp-picture.cdn.bcebos.com/bab5c45872dade49be25e9e526042e6816e9d5bd.jpg)
3、再拖入一个Dropdown,作为二级菜单,并转换为动态面板,命名为Second
![如何使用Axure:[8]制作联动下拉菜单](https://exp-picture.cdn.bcebos.com/d9a8d2d2bb665159686a72998fe23ea23b42c7bd.jpg)
4、为一级菜单添加项目「1、2、3」
![如何使用Axure:[8]制作联动下拉菜单](https://exp-picture.cdn.bcebos.com/a31e1214c27bd2827aa3c3f53cb1eef97ebd3682.jpg)
5、为二级菜单Second添加状态「1、2、3」
![如何使用Axure:[8]制作联动下拉菜单](https://exp-picture.cdn.bcebos.com/ce26355fd5460596b73f96633e03c8d247fe2582.jpg)
6、分别在不同的状态中,添加一个下拉菜单,作为根据一级菜单的选项,切换后的待选项
![如何使用Axure:[8]制作联动下拉菜单](https://exp-picture.cdn.bcebos.com/c3c22dbf3bef354f4993d68d23db574afb321b82.jpg)
7、为一级菜单添加「OnSelectionChange」事件用例,限制条件为当前选择的值。并分别添加其他一级菜单选项的事件用例。
![如何使用Axure:[8]制作联动下拉菜单](https://exp-picture.cdn.bcebos.com/560be432939c2cf7ff99beaa452c5b1b1fde1282.jpg)
![如何使用Axure:[8]制作联动下拉菜单](https://exp-picture.cdn.bcebos.com/cf6d451b1edef4dc861271ac45ecd3d968750c82.jpg)
![如何使用Axure:[8]制作联动下拉菜单](https://exp-picture.cdn.bcebos.com/d2987775f2c4ec99746866b2c3fe1e425c6b0782.jpg)
完成
1、按F5进行预览
![如何使用Axure:[8]制作联动下拉菜单](https://exp-picture.cdn.bcebos.com/49bf00425d6b04d17a02f83bb213e8e5edee0182.jpg)