Axure的级联选择组件主要利用动态面板，效果图片如下，用户可以通过一级级选择确定子项的目标，以下以城市为例介绍具体实现方法。
工具/原料
Axure 9
方法/步骤
1
首先介绍如何利用动态面板实现级联的选择，第一步我们设计好框架1、拖动一个矩形框作为背景，设置阴影使其看上去比较美观2、再拖动三个矩形框作为每一个项承载3、拖动小矩形作为数据内容，各个小矩形的悬停效果设置为浅蓝色，选中时也为浅蓝色
2
框架搭完，第二步我们设置数据1、将作为省的数据及矩形框组合命名为省；作为市的数据矩形框及矩形框02组合并转换为动态面板命名市；作为区的数据矩形框及矩形框03组合并转换为动态面板区2、如图设置市的面板状态并填充数据3、如图设置区的面板状态并填充数据
3
设置数据完第三步设计交互效果，以浙江省的为例1、将两个动态面板设置为隐藏2、当点击浙江省时，滑动出现市的动态面板，面板状态为浙江省下市3、当点击杭州市时，滑动出现区的动态面板，面板状态为杭州市下区如下图
4
其他数据的交互效果也是如此，这里不再赘述，上述步骤做完级联选择就基本实现。接下来我们要设计一个选择框，使选择到对应区时，选择框能够获取到数据。1、首先还需要将我们刚刚设计好的级联选择的组合命名为级联选择下拉框然后设为隐藏2、我们拉动一个矩形框，设置悬停和选中效果，我这里依旧为#108EE9的浅蓝色。交互事件如下图
5
最后我们在单击区的数据时，选择框的文本变为该区的数据即可，如下图
6
前面步骤做完基本效果就完成啦
注意事项
如果有设置选中样式颜色的，需在单击时将其他选中状态设置为假，不然都会变成蓝色，或者利用选项组的互斥功能
上一篇：JS中如何删除选中复选框的行
下一篇：怎样禁用Internet选项？