猿型库：省市两级联动下拉框

在前面的练习里面，我讲了如何做自定义下拉框，现在我们引申一下，来制作一个省市两级联动的下来框。

 

效果查看：http://www.axurestudy.cn/pr/index.html

 

【需求分析】

1、对于“省”下拉框，点击下拉框的时候要弹出对应的省份名称；

2、对于“市”下拉框，点击市下拉框的时候，需要判断当前选择的省份：

A、如果是省份没有选择，则无法下拉；

B、如果已经选择一个省份，则下拉列表显示该省份对应的市；

3、其他的下拉框对应的需求，比如点击的时候边框变成蓝色，下拉箭头朝下这个需求，与自定义下拉框里面的需求相同；

【原型设计】

1、首先制作“省”的选择器，具体的制作方法请参考<<猿型库：Axure小练习之自定义下拉框>>这个练习案例；

2、复制“省”的下拉列表框，创建为市的下来列表，注意把市对应的命名都改成city前缀；

3、修改“市”下拉框对应中继器的数据源，修改为province和city两个列；

4、到此，省市两级的交互列表已经完成，效果展示如下：

【交互设计】

1、“省”下拉框的交互请参考<<猿型库：Axure小练习之自定义下拉框>>里面下拉框的交互；

2、对于“省”下拉框选择器，除了步骤1中的基本交互之外，还需要增加一点，即 当“省”下拉框选择之后，还需要把“市”下拉框重置为“请选择”；

3、对于“市“下拉框， 基本的交互的制作方法与”省“下拉框相同，但是需要注意两个地方：

a、在点击下拉框的时候，要判断”省“下拉框里面的内容，如果”省“下拉框的内容是”请选择“，则”市“下拉框不能下拉；

b、如果”省“下拉框已经选择，则使用选择的省份去过滤”市“下拉框中的内容，具体的交互如下所示：

至此，省市两级的下拉框就最好了，同学们赶紧去试试吧。

---

回复【入门】 ，获取零基础Axure快速入门****；

回复【安装】 ，获取安装程序；

回复【练习】 ，获取练习案例；

回复【高保真】，获取高保真原型；

关注微信公众号【猿型库】，获取更多优质Axure资源；