【Axure】省市区列表三级选择联动

【前言】

  省市区三级联动这个功能在软件中是很常见的，但是原型是要怎样实现呢？关于这个功能，我在网上查阅了一部分，加上自己的研究，最终实现。虽然过程有点曲折，特别是其中的各种嵌套关系有一点点乱，不过理清了就好了~下面和大家分享一下我的研究成果。

案例效果：

案例描述：

省市区列表的初始选项为“河北省廊坊市廊坊市区1”，改变省市列表的选项时，区县的列表内容跟随改变。

元件准备：

1.1动态面板（用于放置市的列表）：市

1.2动态面板（用于放置区的列表）：区

1.1动态面板“市”的状态：

1.1.0动态面板“市”各个状态的内容：

1.2动态面板“区”的状态：

1.2.0动态面板“区”各个状态的内容:

1.2.1动态面板“河北省”各个状态的内容：

1.2.2动态面板“吉林省”各个状态的内容：

操作步骤：

1、为“省”下拉列表的【选项改变时】事件添加“用例1”，编辑条件为“备选项This==选项河北省”，设置动作为【设置面板状态】，{配置动作}为【set区（动态面板）stateto 河北省】和【set市（动态面板）state to 河北省】。

添加“用例2”，编辑条件为“备选项This==选项吉林省”，设置动作为【设置面板状态】，{配置动作}为【set区（动态面板）state to 吉林省】和【set市（动态面板）state to 吉林省】。

2、（1）双击动态面板“市”，选择“状态1：河北省”，双击进入动态面板。设置“廊坊市”下拉列表【选项改变时】事件添加“用例1”，编辑条件为“备选项This==选项廊坊市”，设置动作为【设置面板状态】，{配置动作}为【set河北省（动态面板）state to 廊坊市】。

设置“廊坊市”下拉列表【选项改变时】事件添加“用例2”，编辑条件为“备选项This==选项邯郸市”，设置动作为【设置面板状态】，{配置动作}为【set河北省（动态面板）state to 邯郸市】。

（2）双击动态面板“市”，选择“状态2：吉林省”，双击进入动态面板。设置“松原市”下拉列表【选项改变时】事件添加“用例1”，编辑条件为“备选项This==选项松原市”，设置动作为【设置面板状态】，{配置动作}为【set吉林省（动态面板）state to 松原市】。添加“用例2”，编辑条件为“备选项This==选项大安市”，设置动作为【设置面板状态】，{配置动作}为【set吉林省（动态面板）stateto大安市】。

3、点击运行，实现效果

【小结】

       在操作的过程中可能会有一点晕，因为这几层之间总是互相嵌套着的。但是实现之后你就会发现，他们每层之间是有规律的。“省”是下拉列表框，“市”是动态面板嵌套下拉列表框，“区”是动态面板嵌套动态面板嵌套下拉列表框，是第几个就是有几层，且从外数每层的命名都是相同的，只有最内层的是最终显示的列表选项。这样一层一层看下去是不是就清晰了很多呢！

       生活处处充满惊喜，让我们继续加油！O(∩_∩)O