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

时间:2024-03-15 08:13:51

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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