使用多个下拉列表隐藏 DIV

Question

我真的不知道如何使用多个下拉菜单。我有一个网页，上面用卡片列出了飞机；我通过模拟器过滤这些卡，它运行得很好，这是我的代码。

每张卡都有一个关联的simulatortype。它可以是任何"xp"p3d"fsx"的组合——因此我在java脚本中使用"like"来隐藏没有组合的卡。

<div class="aircraft col-md-6 col-lg-4" data-simulatortype="###">

这是我的JavaScript，它从下拉菜单中获取输入。

$( ".simulator-type-select" ).change(function() {
var selectedSimulatorType = this.options[this.selectedIndex].value;
var count = $('.aircraft[data-simulatortype*="' + selectedSimulatorType + '"]').length;
if (selectedSimulatorType == "all") {
$('.aircraft').removeClass('hidden');
$('.aircraft-notavailable').addClass('hidden');
} else if (count == "0") {
$('.aircraft-notavailable').removeClass('hidden');
$('.aircraft').addClass('hidden');
} else {
$('.aircraft-notavailable').addClass('hidden');
$('.aircraft').addClass('hidden');
$('.aircraft[data-simulatortype*="' + selectedSimulatorType + '"]').removeClass('hidden');
} 
});

现在我想添加一个额外的下拉列表，它将具有值："货物"预定"包机"。

除了模拟器类型之外，我还打算在每个div中添加以下内容。

<div class="aircraft col-md-6 col-lg-4" data-simulatortype="###" data-flighttype="###">

我试过这个代码，但我都拿不下。我的目标是让任何一个倒下的人做点什么；你可以选择模拟器类型，然后选择飞行类型，或者反之亦然。

var simulator = $('.simulator-type-select');
var ops = $('.flightops-type-select');
var count = $('.aircraft[data-simulatortype*="' + simulator.val() + '"]').length;
if (simulator.prop('value') == "all" || ops.prop('value') == "all" ) {
$('.aircraft').removeClass('hidden');
$('.aircraft-notavailable').addClass('hidden');
}
if (simulator.prop('selectedIndex') > 0 || ops.prop('selectedIndex') > 0 ) {
$('.aircraft-notavailable').addClass('hidden');
$('.aircraft').addClass('hidden');
$('.aircraft').filter('[data-simulatortype*="' + simulator.val() + '"][data-flightopstype="' + ops.val() + '"]').removeClass('hidden');
} else {
$('.aircraft-notavailable').removeClass('hidden');
}
});

.aircraft是DIV I抓取。

如果计数＝0，则.aircraft-notavailable是DIV I显示；这意味着没有基于过滤器请求的选项。

Answer 1

我在遇到类似问题后发现了这一点。

$("select.filter-type-select").change(function(){
var filters = $.map($("select.filter-type-select").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#filter-container").find("div#aircraft").hide();
$("div#filter-container").find("div." + filters).show();
});