Axure实现省市列表的联动效果

---->初始状态:"请选择"时:


---->选择省市列表时:


第一步:在第一个下拉列表中设置对应的省级城市,如下图:

Axure实现省市列表的联动效果_第1张图片

第二步:设置一个动态面板与第一个下拉列表并列排布,并将动态面板命名未“list”,在其中添加与下拉列表对应的省级城市的名字,如下图所示:

Axure实现省市列表的联动效果_第2张图片

第三步:对于动态面板“list”中的每一个省级城市对应的页面添加一个下拉列表并在下拉列表中添加该省级城市的下属城市名字,如下图所示:

Axure实现省市列表的联动效果_第3张图片

Axure实现省市列表的联动效果_第4张图片

Axure实现省市列表的联动效果_第5张图片

Axure实现省市列表的联动效果_第6张图片

Axure实现省市列表的联动效果_第7张图片

第四步:给第一个省级城市的下拉列表添加用例,设置动作为【设置面板状态】;{选择状态}为【Value】,{状态名称或序号}中填写“[[p]]”;公式中“P”为局部变量,其内容为“当前元件”(This)的【被选项】;

Axure实现省市列表的联动效果_第8张图片

Axure实现省市列表的联动效果_第9张图片

Axure实现省市列表的联动效果_第10张图片

Axure实现省市列表的联动效果_第11张图片

第五步:设置列表选中项,将第一个下拉列表中的省级城市与动态面板中的与之对应的市级城市相关联,设置成功后即可实现省市列表的联动效果:

Axure实现省市列表的联动效果_第12张图片

Axure实现省市列表的联动效果_第13张图片

你可能感兴趣的:(Axure基础知识)