相信大家在日常的产品设计中，经常会使用到省市县地址选择器，比如电商添加收货地址、添加家庭住址等，那么今天我将带大家一起使用axure从0-1完成省市县三级联动地址输入器的制作
一、效果展示
二、功能解析
功能主要包含四个模块内容：省份下拉选择器、市下拉选择器、县下拉选择器
主要实现的功能如下：
①点击选择省，下拉显示所有的省份，点击后选中对应的省份
②点击选择市，下拉展示选中省包含的所有市；若未选中省时，则提示选择省
③点击选择县，下拉展示选中市包含的所有县；若未选中市时，则提示选择市
三、原型绘制
1.绘制省份下拉选择器
①绘制输入框
由于自带的文本输入框较丑，这里咱们自定义一个。首先绘制输入框的背景，拖入一个矩形，大小设置为200*40，设置边框颜色以及鼠标悬停时的效果
然后拖入一个文本输入框，大小设置为190*40，拖至合适的位置，并命名为省份，隐藏边框
②绘制下拉省选择框
拖入一个中继器，用于存放所有的省份，设置中继器中的内容为一个矩形，大小为200*40，并设置交互时间，当鼠标点击时，设置当前选择的矩形文本到省份输入框
为中继器适配数据，在第一列中输入所有的省份，并在中继器加载时，将所填写的数据适配到中继器上
将中继器转化为动态面板，并设置固定的高度，滚动条设置为自动显示垂直滚动条
将动态面板拖至省份输入框的下边，默认设置为隐藏，同时命名为省份待选项
③添加相关的交互事件
首先为背景添加相关的点击事件，当鼠标点击时，切换选中效果；再添加选中时，显示下拉省份待选项；取消选中时，隐藏下拉省份待选项
2.绘制市下拉选择器
①复制选择器
复制第1步制作的省下拉选择器，将对应的输入框命名改为城市；下拉选择器改名为城市待选项
②修改中继器
添加两列内容，一列命名为s，代表的是省；一列命名为cs，代表的是城市；根据省市的对应关系，将所有的省市都录入，这个比较耗时，希望大家耐心一些
③绘制吐司
拖入一个矩形，命名为提示文字，并将其转化为动态面板，命名为吐司
④为市输入框添加交互事件
选中市输入框的背景，添加选中时的交互事件，当省份的输入框文本是请选择时，提示请选择省份；
当省份的输入框是其他文本时，根据已经选中的省份名称，显示并筛选出市选择中继器中关于本省的市名称
3.绘制县下拉选择器
县选择器的制作其实和2市选择器的制作流程类似
①复制选择器
复制市下拉选择器，并将市输入框命名为区域，下拉选择器命名为区域待选项
②编辑中继器
将城市和县的所有对应的数据都录入并适配
③添加交互事件
选中县输入框的背景，添加选中时的交互事件，当市的输入框文本是请选择时，提示请选择城市；
当市的输入框是其他文本时，根据已经选中的城市名称，显示并筛选出县选择中继器中关于本市的县名称
到这里城市选择器的元件就绘制完毕了，希望能够帮助到大家，大家如果有什么疑问可以在评论区讨论
