编者按:在页面的设计中，我们经常会遇到一些动态的面板设计，在这种设计中需要注意很多细节和逻辑问题；本文作者分享了如何使用动态面板绘制省市三级联动下拉菜单，大家一起学习一下。

动态面板广泛应用于Axure原型设计。在本课程中，我们将学习动态面板的应用。

在本文中，我们将解释如何使用动态面板来绘制省市三级联动下拉菜单。

完成效果图

先来看看完成的效果图。如您所见，省市联动下拉菜单的交互主要包括:

初始状态时，省份菜单显示，城市菜单和区县菜单不显示；选择省份时，城市菜单显示，区县菜单不显示；选择城市时，区县菜单显示；切换省份时，城市菜单复原，区县菜单不显示；切换城市时，区县菜单复原。

下拉菜单初稿

为了节省时间，下拉菜单的初稿已经提前准备好了。我们来解释一下设置联动交互的步骤。

01步骤1:创建动态面板

首先选择北京城市菜单，右键单击，在弹出菜单中选择转换为动态面板。然后，将左栏切换到summary，将动态面板命名为city(适当的命名便于区分和查找组件)。

在北京城市菜单上，右键单击选择转换为动态面板

命名动态面板城市

右键单击动态面板State1，从弹出菜单中选择添加状态，添加一个State2状态；将河北城市菜单拖到状态2中，并在动态面板中将其拖到与省菜单对齐的位置。

右键单击状态1，选择添加状态，并将其添加为状态2

将河北城市拖入状态2

在动态面板中，拖动河北城市菜单以与省菜单对齐

然后回到正常画布，选择北京区县菜单，右键，在弹出菜单中选择改成动态面板；然后，在左栏的摘要中，将动态面板命名为区。

在北京区县菜单上，右键选择转换为动态面板

将动态面板命名为区县

在区县动态面板中右键单击State1，在弹出菜单中选择添加州，新增两个州为State2和State 3；；然后将石家庄县菜单拖至州2，将唐山县菜单拖至州3，并将其拖至与动态面板中的省菜单对齐。

右键单击状态1，选择添加状态，并添加两个新状态作为状态2和状态3

石家庄区县拖进2号州，唐山区县拖进3号州

在动态面板中，拖动石家庄和唐山的菜单，使其与各省的菜单对齐

第二步:设置省级菜单的联动交互

首先回到正常画布，选择省菜单，在右栏交互中点击新建交互，然后在选项依次变化时点击_显示隐藏_城市动态面板，设置为隐藏；然后单击右上角的添加目标，选择区县动态面板(默认隐藏)，然后单击完成。

选择省菜单，然后单击右栏中的新建交互

当选项依次改变时，单击显示隐藏城市动态面板

设置为隐藏

单击添加目标并选择区县动态面板

默认值为隐藏，直接单击“完成”

然后点击启用情况，在情况编辑弹出窗口中点击添加条件，保留每个菜单为默认项，然后直接点击确定。

单击启用情况，打开情况编辑窗口

单击情况编辑窗口中的添加条件，然后单击确定

这里的交互是指我们通过判断省菜单的选项来确定市/区菜单的显示状态:

情形一，当选项为请选择省/直辖市时，隐藏城市菜单和区县菜单；情形二，当选项为北京时，显示城市菜单State 1（北京城市），区县菜单不显示；情形三，当选项为河北时，显示城市菜单State 2（河北城市），区县菜单不显示。

所以我们接着按照前面的步骤添加第二种情况；首先，当选项发生变化时，单击“添加情况”，打开情况编辑窗口，在弹出窗口中单击“添加条件”，最后从下拉菜单中选择“北京”。

点击互动右上角的添加情境，打开情境编辑窗口

在弹出的窗口中点击增加条件，最后一个修改条件的菜单是北京

然后在右栏的情况2中，点击添加动作，然后依次点击设置面板status _ city动态面板，勾选显示是否隐藏；然后再次点击添加动作，依次点击设置列表中选中的项目_北京市；再次单击添加操作，然后单击显示隐藏_区/县动态面板将其设置为隐藏。

单击方案2上的添加操作

然后依次单击设置面板状态_城市动态面板，并选中显示是否隐藏

再次单击添加操作，然后单击设置列表选择项目_北京市

再次单击添加操作，单击显示隐藏_区/县动态面板，并将其设置为隐藏

然后我们添加第三个场景，当选项发生变化时，点击添加场景，打开场景编辑窗口，在弹出窗口中点击添加条件，最后从下拉菜单中选择河北。

再次单击添加方案以添加方案3

在情况编辑窗口中点击增加条件，从最后一个下拉菜单中选择河北

然后点击右栏案例3中的添加动作，依次点击设置面板State _ city动态面板，点击状态菜单，选择状态2(河北城市)，勾选隐藏则显示。

单击场景3中的添加操作

单击“设置”面板“州_城市动态”面板，选择“州2”，然后选中“隐藏时显示”。

再次点击添加动作，然后在设置列表中点击选中的项目_河北城市；再次单击添加操作，然后单击显示隐藏_区/县动态面板将其设置为隐藏。

再次点击添加动作，点击设置列表选择项目_河北城市

再次单击添加操作，单击显示隐藏_区/县动态面板，并将其设置为隐藏

省级菜单的所有交互

第三步:设置北京城市菜单的联动互动

首先在左栏的摘要中选择北京市，点击右栏的新建交互，然后在选项变化时点击_显示隐藏_区县动态面板，设置为隐藏。

选择北京市，点击右栏新增互动

选项更改时，单击显示隐藏区县动态面板

设为隐藏

然后单击启用情况，打开情况编辑窗口，在弹出窗口中单击添加条件，将每个菜单保留为默认项目，然后直接单击确定。

单击启用案例

单击情况编辑窗口中的添加条件，然后单击确定

这里的交互是指我们通过判断城市菜单的选项来确定区县菜单的显示状态:

情形一，当选项为请选择市时，隐藏区县菜单；情形二，当选项为北京时，显示区县菜单。

所以我们接着按照前面的步骤添加第二种情况；首先，当选项发生变化时，单击“添加情况”，打开情况编辑窗口，在弹出窗口中单击“添加条件”，最后从下拉菜单中选择“北京”。

单击添加案例，打开案例编辑窗口

在情况编辑窗口中点击增加条件，从最后的下拉菜单中选择北京

然后点击右栏的添加动作，依次点击设置面板状态_区/县动态面板，勾选是否隐藏显示；再次点击添加动作，在设置列表中依次点击选中的项目_北京区县，然后直接点击确定即可。

单击添加操作，然后单击设置面板状态_区/县动态面板，并选中显示是否隐藏

然后单击添加操作，再单击设置列表选定项目_北京区县

北京城市菜单的所有互动

第四步:设置河北城市菜单联动互动

首先在左栏的摘要中选择河北市，点击右栏的新建交互，然后在选项依次变化时点击_显示隐藏_区县动态面板，设置为隐藏。

选择河北城市，点击右栏新增互动

单击选项更改时显示隐藏区/县动态面板，并将其设置为隐藏

然后单击启用情况，打开情况编辑窗口，在弹出窗口中单击添加条件，将每个菜单保留为默认项目，然后直接单击确定。

单击启用情况，打开情况编辑窗口

在情况编辑窗口中单击添加条件，然后单击确定

和第三步一样，这里的交互是指我们通过判断城市菜单的选项来确定地区菜单的显示状态:

情形一，当选项为请选择市时，隐藏区县菜单；情形二，当选项为石家庄时，显示石家庄区县菜单；情形三，当选项为唐山时，显示唐山区县菜单。

所以我们按照前面的步骤添加第二种情况。首先，单击添加情况，打开情况编辑弹出窗口，在弹出窗口中单击添加条件，最后从下拉菜单中选择石家庄。

单击添加案例，打开案例编辑窗口

在情况编辑窗口中点击增加条件，从最后一个下拉菜单中选择石家庄

然后点击案例2中的添加动作，依次点击设置面板State _ district/country动态面板，点击状态菜单，在弹出菜单中选择状态2(石家庄区/县)，勾选是否隐藏显示；再次点击“添加动作”，依次点击“设置列表选择项目_石家庄区县”，然后直接点击“确定”。

单击方案2的添加操作

单击“设置”面板“州_区/县动态”面板，选择“州2”作为“州”，并选中“隐藏时显示”

然后点击添加操作，点击设置列表选择项目_石家庄区县

然后我们添加第三个场景，首先点击添加场景，打开场景编辑窗口，在弹出窗口中点击添加条件，最后从下拉菜单中选择唐山。

点击增加情况，打开情况编辑窗口，点击增加条件，在最终菜单中选择唐山

然后点击案例3中的添加动作，依次点击设置面板State _ district/country动态面板，点击状态菜单，在弹出菜单中选择状态3(唐山区/县)，然后勾选显示是否隐藏；再次点击添加动作，依次点击设置列表选择项_唐山区县，然后直接点击确定。

单击方案3上的添加操作

单击“设置”面板“州_区/县动态”面板，选择“州3”作为“州”，然后选中“隐藏时显示”。

再次点击添加动作，点击设置列表选择项目_唐山区县

河北城市菜单的所有互动

第五步:隐藏城市/地区菜单

首先，回到正常画布，选择城市动态面板和地区动态面板，然后将它们设置为隐藏。

将城市动态面板和地区动态面板设置为隐藏

06结论

好的，会画出省市三级联动下拉菜单。这就是全部时间。你学会了吗？