数据过滤器滚动列表

Question

我正在使用垂直滚动列表向下滚动20个缩略图。我有4个下拉菜单，每个都有自己的选项。

EG：

下拉1 - 位置（英国，美国，墨西哥，法国） 下拉2 - 系统（发动机，机身）

现在，当我从下拉列表中选择英国时，所有与英国相关联的图像都会被过滤，而其余图像则会被过滤掉。如果我然后从第二个下拉菜单中选择“引擎”，则会显示与引擎相关联的图像，而其余的则会过滤掉（这会重置我选择的英国）

这显示了来自英国，美国，墨西哥和法国的发动机......而不仅仅是英国从第一次下降。 选择英国后，选择引擎我只希望保留英国的引擎，并删除列表中的所有引擎。 （美国，墨西哥和法国的发动机）

建议会很棒。提前致谢。

Answer 1

我不久前需要做这件事。我采取的方法如下：

1. 定义一个数组来存储选项
2. 从数组中获取项目。使用AngularJS这很容易，但是使用JQuery，您可能需要定义一些方法来使用数组中的数据刷新所有选择元素。
3. 将每个下拉列表中的当前值存储在主阵列外部某处的内存中。 （我相信我在dom元素中使用了数据属性。）
4. 修改刷新所有元素的方法，将当前值添加到选项列表，然后将下拉列表的焦点设置为当前值。

一旦拥有了这个身体，剩下的就变得容易了。选择值包括以下三个步骤：

1. 将当前值附加到数组。
2. 将当前值更新为您选择的新值。
3. 使用您定义的方法刷新所有选择元素。

哦，还有最后一件事。您当前的值是将用于确定是否显示或隐藏缩略图的值。