Axure绘制省市县地址输入器

​

 相信大家在日常的产品设计中，经常会使用到省市县地址选择器，比如电商添加收货地址、添加家庭住址等，那么今天我将带大家一起使用axure从0-1完成省市县三级联动地址输入器的制作

一、效果展示

二、功能解析

功能主要包含四个模块内容：省份下拉选择器、市下拉选择器、县下拉选择器

主要实现的功能如下：

①点击选择省，下拉显示所有的省份，点击后选中对应的省份

②点击选择市，下拉展示选中省包含的所有市；若未选中省时，则提示选择省

③点击选择县，下拉展示选中市包含的所有县；若未选中市时，则提示选择市

三、原型绘制

1.绘制省份下拉选择器

①绘制输入框

由于自带的文本输入框较丑，这里咱们自定义一个。首先绘制输入框的背景，拖入一个矩形，大小设置为200*40，设置边框颜色以及鼠标悬停时的效果

然后拖入一个文本输入框，大小设置为190*40，拖至合适的位置，并命名为省份，隐藏边框

②绘制下拉省选择框

拖入一个中继器，用于存放所有的省份，设置中继器中的内容为一个矩形，大小为200*40，并设置交互时间，当鼠标点击时，设置当前选择的矩形文本到省份输入框

为中继器适配数据，在第一列中输入所有的省份，并在中继器加载时，将所填写的数据适配到中继器上

将中继器转化为动态面板，并设置固定的高度，滚动条设置为自动显示垂直滚动条

将动态面板拖至省份输入框的下边，默认设置为隐藏，同时命名为省份待选项

③添加相关的交互事件

首先为背景添加相关的点击事件，当鼠标点击时，切换选中效果；再添加选中时，显示下拉省份待选项；取消选中时，隐藏下拉省份待选项

2.绘制市下拉选择器

①复制选择器

复制第1步制作的省下拉选择器，将对应的输入框命名改为城市；下拉选择器改名为城市待选项

②修改中继器

添加两列内容，一列命名为s，代表的是省；一列命名为cs，代表的是城市；根据省市的对应关系，将所有的省市都录入，这个比较耗时，希望大家耐心一些

③绘制吐司

拖入一个矩形，命名为提示文字，并将其转化为动态面板，命名为吐司

 

④为市输入框添加交互事件

选中市输入框的背景，添加选中时的交互事件，当省份的输入框文本是请选择时，提示请选择省份；

当省份的输入框是其他文本时，根据已经选中的省份名称，显示并筛选出市选择中继器中关于本省的市名称

3.绘制县下拉选择器

县选择器的制作其实和2市选择器的制作流程类似

①复制选择器

复制市下拉选择器，并将市输入框命名为区域，下拉选择器命名为区域待选项

②编辑中继器

将城市和县的所有对应的数据都录入并适配

③添加交互事件

选中县输入框的背景，添加选中时的交互事件，当市的输入框文本是请选择时，提示请选择城市；

当市的输入框是其他文本时，根据已经选中的城市名称，显示并筛选出县选择中继器中关于本市的县名称

到这里城市选择器的元件就绘制完毕了，希望能够帮助到大家，大家如果有什么疑问可以在评论区讨论