Axure实现下拉框联动效果

Axure实现下拉框联动效果

下拉列表框级联效果会用到很多的地方,因为第一个下拉框的选择,影响到后面下拉框里的数据显示。那么如何做到这样的效果,作为一个初学者,分享一下我的小经验。

下面已最常见的地址的选择为例子,演示一下如何进行操作。

1.在新建的页面中添加三个下拉框,因为第一个是正常显示的下拉框,所以,习惯给其定义一个名字为comProvince即选择省份的意思,然后,后面两个下拉框是要将其转换成动态面板的,所以分别命名为panelCity和panelArea。并在comProvince中添加一些数据。如下图。

Axure实现下拉框联动效果_第1张图片

2.以请选择省份为黑龙江省为例,在panelCity中添加动态面板,动态面板的名字分别为该省的名字,然后在动态面板中添加下拉框,下拉框中的列表项为该省下的城市。这里需要关注一点的是有多少个省份就需要添加多少个动态面板。然后以此类推,以同样的方法进行区域的添加。如下图。
Axure实现下拉框联动效果_第2张图片

Axure实现下拉框联动效果_第3张图片

3.数据都已准备好,下面就可以进行添加交互效果了。首先选择comProvince控件进行设置,选择当选项改变时,如下图。
Axure实现下拉框联动效果_第4张图片
Axure实现下拉框联动效果_第5张图片
Axure实现下拉框联动效果_第6张图片
4.选择省,然后现在可以显示对应的市级信息,下面以同样的方法可以添加市级下的区域信息,一起动手试试吧。需要注意的是,在设置市级下的区域信息,是在动态面板里的状态信息中的下拉框中设置的,希望你好运气,可以成功。

你可能感兴趣的:(Axure,Axure,下拉框,级联下拉框)