分层下拉选择器是原型设计中常见的原型。本文以省市行政选择器为例，分析如何制作一个带中继器的两级下拉选择器。让我们一起来学习吧。

分层下拉选择器是原型设计中的常见组件。今天笔者就来教大家如何做一个带复读机的两级下拉选择器。本教程以省市行政区选择器为例，制作完成后，应该有如下效果：

下拉效果：点击选择区域显示选择器，点击页面空白处收起选择器选择效果：选择省级行政区后，自动显示下一级变更选项下的二级选项，可选择对应市级行政区的回显效果：选择一级选项后， 所选内容会自动回显复读机效果：具体选项可在复读机表中维护，填写后会自动生成互动效果的原型地址：https://5tad3q.axshare.com/#g=1.

1.材料准备和原型制作。制作一级选择器我们主要使用中继器作为选择器。我们为repeater中的矩形设置了选定的样式和默认样式。选定的样式是鼠标移入并改变颜色的样式。这里之所以不用悬停式，是因为复读机中后续设计更新线的交互作用。如果采用移入式，会有bug；禁用样式是点击此选项后的样式。取消边框线，将所选样式增加为蓝色文字，调整大小。

我们在矩形上方放置一个热区，其大小与矩形相同。因为矩形是禁用的，我们无法点击，所以只需要矩形做出变色效果，后续在热区的交互书写就可以避免再次点击不到的情况。

中继器排列成网格状。中继器表中的两列：

第1列：填写第一级选项，如广东省和陕西省.……true:默认为空，以后可以用于所选的交互。2.做好一级选择器后，我们就把整个repeater变成一个动态面板，复制面板状态。新面板状态中的repeater是时间级别选择器，并向repeater表中添加一列：

第2列：填写二级选项，如广州、深圳；这应该对应于前面的列1，它是次级选项的第一级选项。例如，如果次选项是广州，则第1列应填写广东省。

因为次选项是案例中的最后一项，禁用后不会影响后续的交互，所以这里不需要用热区遮挡矩形，后续的交互也可以直接写在矩形里。

3.制作标签文本标签文本是可以通过单击进行切换的文本。比如选择广东省广州市后，点击省级行政区，就可以回到一级选择器，重新选择省份。

然后我们可以使用两个文本标签来制作它。这里，我们添加选择的样式，以显示底线是蓝色。一级选项文本默认选中，二级选项文本默认禁用，因为一开始没有选中一级选项时，二级选项是看不到的。

最后，将两个标签字设置为单选组。

4.其他材料包括矩形框，用于点击显示选择器、填充默认文本和回显所选文本。我们可以添加悬停和精选风格，使其更加美观；

上下箭头——默认显示向下箭头，隐藏向上箭头；

用矩形框组合上下箭头。

最后，你需要一个背景矩形，只需用矩形加上阴影，将背景矩形和上面的组件1、2、3组合起来，默认是隐藏的。如下图所示放置：

二、互动制作1。回显框组合的交互事件当鼠标点击回显框组合时，我们使用显示的交互来显示下面的选择框组合。这里主要是想选择灯箱效果，这样点击空白处就可以收起灯箱，灯箱的颜色可以自由设置，黑色，50%透明。

2.当se

3.当加载一级选择器交互事件repeater的每一项时，我们使用设置文本的交互，将repeater中矩形的文本值设置为repeater表中Column1对应的文本。

如果true列的值等于1，我们将禁用当前行重复器中的矩形，并在其前面添加一个禁用的交互样式，以便可以选择颜色变化的效果：

当鼠标移动到矩形上方的热区时，我们用选择的交互将矩形设置为true当鼠标移出矩形上方的热区时，我们将所选交互的矩形设置为false。结合前面选定的样式设置，会有一种移入和变色的效果。

当鼠标点击矩形上方的热区时，我们首先通过更新行的交互将当前行的true列的值更新为1。结合上面的交互，相当于组件会禁用颜色变化。

这里我们还需要考虑之前是否选择了任何选项来改变颜色，所以我们需要重新设置。简单来说，我们需要先将true列中的所有值都更改为0，然后更新当前行。所以我们需要用标记行的事件来标记所有的行，然后用更新行的交互来更新被标记的行，把真列的值更新为0。

这里要考虑的是，如果点击了一级选项，如果之前已经选择了二级选项，那么也要重置，所以我们会用同样的方法更新二级选择器中repeater的所有行。

1级选项器选择之后，我们就用启动的交互，将前面禁用的市级行政区的文字启用，这样就可以点击了。

在点击之前，我们还要用筛选的事件，因为现在二级选择器里面的内容是全部选项，我们要筛选出该一级选项对应的二级选项，所以用筛选事件，筛选的条件就是当前中继器表格当前行的Column1列的文字值等于二级选择器里中继器表格中Column1的文字值。

选择之后，我们还要将文本回显到回显框里，我们用设置文本的交互，将中继器表格中当前行Column1的值设置到回显框里即可。

最后我们触发二级标签文字（市级行政区）鼠标单击时的交互。