菜单联动的含义是什么呢？原来这个菜单联动在我们日常生活中很常见，就是第一级菜单是总类别（根类别），第二级菜单则是取出该类别下的子类别，第三级菜单是该子类别下的子类表别，以此类推。/cms/item/
菜单联动的含义是什么呢？原来这个菜单联动在我们日常生活中很常见，就是第一级菜单是总类别（根类别），第二级菜单则是取出该类别下的子类别，第三级菜单是该子类别下的子类表别，以此类推。
点击<游戏>后面下拉框的值，会改变<面值>后面下拉框的值
点击<面值>后面下拉框的值，会改变后面<空白红色字>的值
接下来的问题就是设计师如何在原型设计中制作出这样的多级联动菜单呢？今天我们在这里和大家分享下在Axure中添加动态面板制作的方法。
下面以大学为例，一般设置多个院系，人数众多甚至过万，例如在学生注册时，通过菜单选择自己的班级：先通过一级菜单选择所在“学院”，二级菜单则根据一级菜单的选择，联动显示该学院的所有“专业”，在三、四级菜单中再联动选择该专业所含的“年级”-“班级”，首先我们先看一下现在的效果。
好的，那我们现在开始操作
步骤一：打开Axure，这里为了方便看清，我们先加了矩形
填充：#E9F2FC 描边： #96AAD8 大小：600*40
步骤二：添加一个文本框为“选择班级”和四个<下拉列表框> ，分别为学院、专业、年级、班级。
步骤三：双击<学院>下拉框，在弹出的<编辑下拉列表框>内写上不同的学院，
我们想要达到的效果是点击<学院>改变后面的<专业>下拉框，例如：东学院下面有三个专业，分别是东学院专业1、东学院专业2、东学院专业3；西学院下面也有三个专业，分别是西学院专业1、西学院专业2、西学院专业3；类推南北学院也各有三个专业。
要怎样做到呢？这里我们就需要用到动态面板啦！！
<专业>下拉框放在一个动态面板里，每个动态面板状态代表一个学院里的专业。好的，接下来我们继续做。
步骤四：把<专业>下拉框放在一个动态面板里，建立四个动态面板状态
步骤五：编辑四个动态面板状态，分别放入一个下拉框，双击下拉框在弹出的<编辑下拉列表框>内写上不同的专业。
步骤六：接下来我们要用到onchange 事件，进行判断，点击<东学院>下拉框，双击右边的<onchange（选项改变时）>弹出<用例编辑器>窗口
步骤七：在<用例编辑器>里点击添加条件，弹出<条件创建器>窗口，
我们在<条件创建器>窗口添加条件：
如果满足条件，选项为“东学院”，则设置动态面板状态到“东学院专业”
<条件创建器>窗口
<用例编辑器>窗口
设置了一个用例，接下来继续设置其他的用例，设置如下，
做完了上面的步骤后，就可以实现二级联动的了，选择东学院，会显示东学院专业的选项。接下来我们要做的是做<年级>下拉框。
步骤八：把<年级>下拉框放在一个动态面板里，建立<专业>里有的动态面板状态，这里对应的东西南北学院各有3个专业；
步骤九：点击其中的一个，<东学院专业1>动态面板状态，放入一个下拉框，双击下拉框在弹出的<编辑下拉列表框>内写上不同的年级。
步骤十：接下来我们要用到onchange 事件，进行判断，双击最外层的<专业>动态面板，弹出<动态面板状态管理器>，选择<东学院专业>动态面板状态，在打开的页面中，点击<专业>下拉框，双击右边的<onchange（选项改变时）>弹出<用例编辑器>窗口
步骤十一：在<用例编辑器>里点击添加条件，弹出<条件创建器>窗口，
我们在<条件创建器>窗口添加条件：
如果满足条件，选项为“东学院专业1”，则设置动态面板状态到“东学院专业1”
<条件创建器>窗口
<用例编辑器>窗口
设置了一个用例，接下来继续设置其他的用例，设置如下，
这里我们只是设置了一个学院的一个专业对应的年级，我们还要同理操作设置其他几个学院的其他专业。工作量有点
大，但都是重复的步骤，可以完成的同时还可以巩固知识，一举两得，努力吧！还有<年级>下拉框，原理也是一样的，
利用动态面板的状态和onchange 事件进行操作，这里就不演示了。祝大家工作愉快。
本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。
