MixItUp с двумя полями выбора/выпадающего списка

Question

Я недостаточно продвинутый в JS, чтобы полностью работать.

У меня есть два выбора полей с опциями:

<select name="" id="filter-position"> 
     <option value="all">Filter by position</option> 
     <option value=".instructor">Instructor</option> 
     <option value=".leader">Leader</option> 
     <option value=".blah">Blah</option> 
     <option value=".whatever">Whatever</option> 
    </select> 

    <select name="" id="filter-location"> 
     <option value="all">Filter by position</option> 
     <option value=".portland">Portland</option> 
     <option value=".missoula">Missoula</option> 
     <option value=".chicago">Chicago</option> 
     <option value=".newyork">New York</option> 
    </select> 

контейнер, где отфильтрованные элементы жить выглядит немного как это:

<ul id="filter-container"> 
     <li class="mix">...</li> 
     <li class="mix">...</li> 
     <li class="mix">...</li> 
     <li class="mix">...</li> 
     <li class="mix">...</li> 
     <li class="mix">...</li> 
    </ul> 

я могу получить каждый фильтровать должным образом, но не вместе (т. е. И). Код JS, который я использую, выглядит примерно так:

$(function(){ 
    var $positionSelect = $('#filter-position'), 
     $locationSelect = $('#filter-location'), 
     $container = $('#filter-container'); 

    $container.mixItUp({}); 

    $positionSelect.on('change', function(){ 
     $container.mixItUp('filter', this.value); 
    }); 

    $locationSelect.on('change', function(){ 
     $container.mixItUp('filter', this.value); 
    }); 
    }); 

Если я отфильтровываю один выбор, то фильтр фильтруется должным образом. Если я затем фильтрую другой, он переопределяет первый фильтр. Я хочу, чтобы они оба использовались.

Я знаю, что есть способ заставить это работать, но я не уверен, как получить эту конкатенированную строку для выполнения логики «и», как описано в разделе Advanced Filtering документов, используя <select>. Помогите?

Answer 1

Вы действительно близко! Из-за того, как работает API mixItUp, фильтры не являются аддитивными (например, когда вы вызываете mixItUp.filter, он не добавляет новый фильтр к тому, что уже активно). Таким образом, вам просто нужно построить новую строку фильтра из значений обоих выпадающих списков, когда один из них изменяется. Вы можете выполнить это следующим образом:

$(function(){ 
    var $positionSelect = $('#filter-position'), 
     $locationSelect = $('#filter-location'), 
     $container = $('#filter-container'); 

    $container.mixItUp({}); 

    $('#filter-position, #filter-location').on('change', function() { 

     var filterString = $positionSelect.val() + $locationSelect.val(); 

     $container.mixItUp('filter', filterString); 
    }); 

    }); 

Я решил использовать JQuery .val() над родной .value в этом случае, так как вы уже используете JQuery, и val(), вероятно, будет более надежным в этом случае. Дайте мне знать, если у вас возникнут проблемы.

Вы также можете изменить это:

<option value="all">Filter by position</option> 

к этому:

<option value="">Filter by position</option> 

для обоих ваших ниспадающих меню, в противном случае вы можете получить некоторые странное поведение.

Answer 2

Используйте запятую как .. $ ('# фильтр-место, # фильтр-контейнер') .он ('изменение', функция() { ... ;)

Answer 3

Нечто подобное ...

$(function(){ 
    $container = $('#filter-container'); 

    $container.mixItUp({}); 

    $container.on('change','#filter-position, #filter-location', function(){ 
     $container.mixItUp('filter', this.value); 
    }); 
});