3

<select class="select select-type">
    <option value="1" data-sort="all">All</option>
    <option value="2" data-sort="pistol">Pistol</option>
    <option value="3" data-sort="riffle">Riffle</option>
    <option value="4" data-sort="smg">SMG</option>
</select>

<select class="select select-class">
    <option value="1" data-sort="all">Все</option>
    <option value="2" data-sort="Base Grade">Base Grade</option>
    <option value="3" data-sort="Extraordinary">Extraordinary</option>
    <option value="4" data-sort="Industrial Grade">Industrial Grade</option>
</select>

<ul id="items">
  <li data-type="pistol" data-class="Base Grade">Item 1</li>
  <li data-type="pistol" data-class="Base Grade">Item 2</li>
  <li data-type="smg" data-class="Extraordinary">Item 3</li>
  <li data-type="riffle" data-class="Extraordinary">Item 4</li>
  <li data-type="riffle" data-class="Industrial Grade">Item 5</li>
  <li data-type="riffle" data-class="Industrial Grade">Item 6</li>
  <li data-type="smg" data-class="Industrial Grade">Item 7</li>
  <li data-type="smg" data-class="Extraordinary">Item 8</li>
</ul>

Есть 2 select (может быть и больше), как реализовать фильтрацию по значениям из селектов по Data атрибутам.

Например если в первом select выбран параметр SMG то показываются элементы с item 3, item 7, item 8(остальные скрываются), и если указать во втором селекте например параметр Extraordinary, то показываются только item 4, item 8

2
  • 1
    Вы сортировку с фильтрацией не перепутали?
    – user176262
    9 янв 2018 в 15:29
  • извиняюсь, действительно перепутал. Исправил
    – stoner
    9 янв 2018 в 15:31

1 ответ 1

3
$(".select-type, .select-class").change(function(){
  var dType = $(".select-type option:selected").data("sort");
  var dClass = $(".select-class option:selected").data("sort");
  $("#items li").each(function(){
    if ( (dType == "all" || dType == $(this).data("type")) &&
         (dClass == "all" || dClass == $(this).data("class")) ) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});
9
  • jsfiddle.net/n9t6b0bf/1
    – stoner
    9 янв 2018 в 15:40
  • пардон, ошибся в названии data атрибута
    – user176262
    9 янв 2018 в 15:43
  • как то без динамического числа фильтров не интересно :(
    – teran
    9 янв 2018 в 15:44
  • @teran это будет следующий вопрос
    – user176262
    9 янв 2018 в 15:45
  • @teran , а что если с динамичным числом фильтров?
    – stoner
    9 янв 2018 в 15:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.