省市区三级联动选择(全国数据)【PMGOD免费案例】

作品名称:省市区三级联动选择(全国数据)【PMGOD免费案例】

作品类型:axure案列/产品原型

软件版本:Axure 8.0

下载说明:点我加入QQ群:532261671,免费获取更多案例

案列制作详情讲解

   省市县三级联动选择功能在互联网平台应用非常广泛,很多人在做产品设计时,不知道怎么实现三级联动效果,或者只能简单实现一两个固定城市的三级联动效果。如果要实现全国城市的三级联动选择呢?PMGOD将通过这篇案列分享,教大家使用Axure制作实现“全国城市省市县三级联动选择效果”

实现效果

bd85348a97fa0317844ffa79a56ee112-picture

1、可以任意选择全国所有省份、选择该省份对应的城市、选择该城市对应的县区;

2、未选择省份时,点击“城市下拉选择”,提示“请先选择省份”;

3、未选择城市时,点击“县区下拉选择”,提示“请先选择城市”;

4、切换选中省份时,重置城市及县区选项;

5、切换选中城市时,重置县区选项

6、当前选项处于下拉框选项状态时,点击其他选择框,隐藏当前选项下拉框;

7、下拉选项框展示时,下拉箭头向上,下拉选项框隐藏时,下拉箭头向上;

8、动态显示三级行政区移入状态、选中状态、取消选中状态;

原理分析

1、利用中继器的数据存储功能,用三个中继器分别存放省份、城市、区域数据;

1.1 省份中继器只需1列,用来存放全国所有省份数据;

1.2 城市中继器需要2列,用来存放省份数据及城市数据(注意省份名称要和省份中继器的省份名称一致);

1.3 县区中继器需要2列,用来存放城市数据及县区数据(注意城市名称要和城市中继器里城市名称一致);

2、利用“省份下拉”元件的单击事件触发省份下拉选项的展示与隐藏;

3、利用临时变量将选中的省份名称赋值给省份输入框,从而显示当前已选省份;

4、利用“省份输入框”元件的文本改变事件,触发城市文本输入框的显示及城市下拉选项框的内容;

5、利用“城市下拉”元件的选中状态事件,判断省份是否选中,未选中城市则给出“请先选择省份!”的错误提示;

6、城市、区域涉及的各元件设置方式同“2、3、4、5”步骤。

元件准备

1、省份输入框背景(省份背景),放在输入框底部

2、省份输入框(省份显示),用于显示已选择的省份名称

3、省份下拉指示图标(省份选择),用于点击触发展示下拉选项,隐藏下拉选项

4、省份下拉组合选项(包括一个中继器sf,动态面板sfn,动态面板sfw),用于显示所有省份名字

5、城市输入框背景(城市背景),放在输入框底部

6、城市输入框(城市显示),用于显示已选择的城市名称

7、城市下拉指示图标(城市选择),用于点击触发展示下拉选项,隐藏下拉选项

8、城市下拉组合选项(包括一个中继器cs,动态面板csn,动态面板csw),用于显示所有城市名字

9、县区输入框背景(县区背景),放在输入框底部

10、县区输入框(县区文字),用于显示已选择的城市名称

11、县区下拉指示图标(县区选择),用于点击触发展示下拉选项,隐藏下拉选项

12、县区下拉组合选项(包括一个中继器xq,动态面板xqn,动态面板xqw),用于显示所有县区名字

13、操作提示组合元件(提示框),用于显示校验出错时的提示

14、背景,整个案例的演示背景,可要可不要

隐藏提示文件,重新布局元件后效果如下

实现步骤

1、准备省份数据及操作显示元件

拖入一个中继器sf,给中继器的默认Column0列添加全国所有省份数据,要加上“请选择”数据

将中继器的数据通过每项加载时赋值给矩形,矩形显示的数据就是省份待选项数据

将中继器sf转换为动态面板sfn,动态面板的大小为220px*240px。设置动态面板的滚动条属性为“自动显示垂直滚动条”

实用小技巧:将可滚动的动态面板sfn转换为动态面板sfw,动态面板的大小为200px*240px。设置动态面板的滚动条属性为“无”,从而可以实现滚动且隐藏滚动条的效果

准备三个元件,分别是:省份背景矩形放在最下面,省份显示文本框放在中间层,省份选择矩形放在最上面。

省份数据涉及的所有元件整理后如下图所示:

2、准备城市数据及操作显示元件

cs中继器(城市待选数据)有两列,一列s保存省份数据,一列cs保存城市数据,注意省份与城市的对应关系。其余操作步骤同省份数据,此处不再描述。

3、准备县区数据及操作显示元件

4、设置省份数据相关元件事件

单击省份选择时,切换该元件的选中状态;选中时,箭头向上(FontAwesome字体),显示省份下拉选项;取消选中时,箭头向下(FontAwesome字体),隐藏省份下拉选项

省份下拉选项展开,单击某一项时,将该项值赋值给省份显示文本框,同时触发省份选择的单击事件(作用是隐藏省份下拉选项框)

当省份显示文本框内容改变时,将城市显示文本框的内容改为请选择(重置城市数据),触发城市中继器的载入事件

4、设置城市数据相关元件事件

单击城市选择时,切换该元件的选中状态;

选中时,需要判断省份显示的文字是否为请选择

如果省份显示为“请选择”,表示省份还没被选中,设置界面提示为“请先选择省份!”,1秒后,自动隐藏提示

如果省份显示不为“请选择”,表示省份已经被选中了,这个时候,需要为中继器添加筛选功能,仅显示已选中省份对应的城市数据;箭头向上(FontAwesome字体),显示城市下拉选项

取消选中时,箭头向下(FontAwesome字体),隐藏城市下拉选项

中继器添加筛选功能,仅显示已选中省份对应的城市数据,设置方式如下

当城市显示文本框内容改变时,将县区文字文本框的内容改为请选择(重置县区数据)

5、设置县区数据相关元件事件

县区各元件点击、显示事件与城市各元件一致,以下是事件设置截图,具体不在描述

实用小技巧:利用显示事件的“灯箱效果”,背景色为黑色,透明度设置为20%。提示效果很漂亮。

本案例已完成,点击QQ群“532261671”获取源文件;

点击查看案例“动态随机获取“大小写字母及数字”图形校验码”;

点击查看案例“双向列表带计数选择”;

更多案例请点击http://www.pmgod.cn 查看。

6 条评论 发表评论

发表评论

以下作品你可能也喜欢:
推荐

产品名称:企业级系统原型通用组件库 组件数量:1000+ 文件类型:.rp (可通过Axure生成.html文件)。rplib文件,可直接导入Axure。 查看场景:Pc端 产品售价:139.00 2024年03月13日 更新记录 1、【选…

售价:¥ 139.00 销量: 189 13288
推荐

本原型模板是用Axure9制作的高度仿制小红书App原型,另外结合了一点自己的创意,交互效果包括table切换、动态面板、中继器、更多、滑动、置顶、函数、变量、判断等根据不同的场景灵活运用。 2023.12.15更新内容如下: 【优化】闪屏…

售价:¥ 22.88 销量: 93 10152
推荐

知识点: 1、较为复杂的用例交互判断(登录、注册、忘记密码页面) 2、全局变量跨页面传递(编辑个人信息) 包含可复用模板(大多数页面可直接复用): -加载页 -引导页 -登录页(知识点1) -注册页(知识点1) -忘记密码(知识点1) -用…

售价:¥ 9.99 销量: 388 14018
推荐

作品介绍 作品名称:智慧校园-全套系统原型 软件版本:Axure 8.0 作品类型:高保真 页面总数:360页,其中智慧校园APP端内容170页,PC后台管理系统190页 作品描述: 智慧校园APP端,产品适用对象主要是学校的职工(包含教师…

售价:¥ 89.00 销量: 31 16484
推荐

软件版本:Axure8.1 产品类型:CRM移动端完美业务高保真app 售价:¥99.9 页面:共计100以上 产品介绍:本产品为一款为中小型企业量身定制的CRM管理软件,实现企业的业务闭环,有效的提示企业效率,助力企业快速成长 功能:产品…

售价:¥ 99.90 销量: 29 6967
推荐

作品名称:医疗手环软硬件-9年产品经理实战Axure原型交互设计模板 当前版本:v1.0 软件版本:Axure 8.0 产品形态:WEB端+小程序端 作品页数:50页 很感谢大家关注到此原型作品,这是一种缘分。下面容我给大家介绍一下此产品:…

售价:¥ 99.00 销量: 25 3793