分级下拉选择器，是原型设计里常用的原件，本文以省市级行政区选择器为案例，分析如何用中继器制作一个二级下拉选择器，一起来学习一下吧。

分级下拉选择器是原型设计里常用的元件，今天作者就教大家如何用中继器制作一个二级下拉选择器，本教程以省市级行政区选择器为案例，制作完成后应具备以下效果：

1. 下拉效果：点击选择地区显示选择器，点击页面空白地方可收起选择器
2. 选择效果：选择省级行政区后，自动显示改一级选项下的二级选项，可以选择对应的市级行政区
3. 回显效果：选择一二级选项后，选择的内容会自动回显
4. 中继器效果：具体选项可以在中继器表格里维护，填写后自动生成交互效果

原型地址：https://5tad3q.axshare.com/#g=1

1. 一级选择器的制作

我们主要用中继器来做选择器，中继器里面的矩形我们设置选中样式和默认样式，选中样式是鼠标移入变色的样式，这里不用悬停样式的原因是因为在中继器中后续设计更新行的交互，如果用移入样式会出现bug；禁用样式是点击选择该选项后的样式。取消边框线，增加选中样式为蓝色文字，调整一下尺寸。

在矩形上方我们放置一个热区，尺寸和矩形一致，因为矩形禁用了就无法点击，所以我们只需要矩形做变色效果，后续交互写在热区上就可以避免无法再次点击的情况

中继器按网格排布。中继器表格里两列内容：

1. Column1：里面填写一级选项，例如广东省、陕西省……
2. true：默认为空即可，后续用来做选中的交互

2. 二级选择器的制作

制作完一级选择器后，我们将整个中继器转为动态面板，复制这个面板状态，在新的面板状态里面的中继器就是时二级选择器，在中继器表格中增加一列：

Column2：里面填写二级选项，例如广州市、深证市；这里要和前面Column1对应，Column1就是该二级选项的一级选项，例如二级选项是广州市，Column1就应该填写广东省。