Скрытие DIV с помощью нескольких раскрывающихся списков

Question

Я не совсем уверен, как использовать несколько раскрывающихся списков. У меня есть веб-страница со списком самолетов в карточках; Я фильтрую эти карты по симулятору, и он отлично работает. Вот мой код.

Каждая карта имеет связанный с ней simulatortype. Это может быть комбинация любого 'xp' 'p3d' 'fsx' - поэтому я использую 'like' в моем java скрипте, чтобы скрыть карты, у которых нет какой-либо комбинации.

<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');
  } 
});

Теперь я хочу добавить дополнительный раскрывающийся список со значениями: 'car go '' запланированный '' устав '.

Я собирался добавить следующее в каждый 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, который я беру.

.aircraft-notavailable - это DIV, который я показываю, если подсчитать = 0; это означает, что нет опций, основанных на запросе фильтра.

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();
});