Как реализовать зависимую фильтрацию блоков?

Question

[STINGRAY_DEVELOP]

Ребятушки, помогите, пожалуйста.



Есть такой html:

<section class="inputs">
        <div class="input input--quantity">
          <select class="select filter__quantity" name="filter__quantity">
            <option selected="selected">Количество занятий</option>
            <option value='100занятий'>100 занятий</option>
            <option value='36занятий'>36 занятий</option>
            <option value='18занятий'>18 занятий</option>
            <option value='разовоепосещение'>разовое посещение</option>
          </select>
        </div>
        <div class="input input--validity">
          <select class="select filter__validity" name="filter__validity">
            <option selected="selected">Срок действия</option>
            <option value='1год'>1 год</option>
            <option value='6месяцев'>6 месяцев</option>
            <option value='1месяц'>1 месяц</option>
          </select>
        </div>
        <div class="input input--time">
          <select class="select filter__time" name="filter__time">
            <option selected="selected">Время помещения</option>
            <option value='утро'>утро</option>
            <option value='вечер'>вечер</option>
          </select>
        </div>
        <div class="input input--type">
          <select class="select filter__type" name="filter__type">
            <option selected="selected">Тип секции</option>
            <option value='вода'>вода</option>
          </select>
        </div>
        <div class="input input--category">
          <select class="select filter__category" name="filter__category">
            <option selected="selected">Категория тренера</option>
            <option value='мастер'>мастер</option>
            <option value='профи'>профи</option>
          </select>
        </div>
      </section>

Блоки добавляются динамические через ajax и атрибуты тоже динамически добавляются.
Фильтрацию решил сделать через атрибуты, так как данные приходят на русском языке. Через классы не получится.

То есть. вот реализация для одного селекта(и она работает):

select1.onchange = function() {
    for (let i = 0; i < blocks.length; i++) {
        if (blocks[i].getAttribute('Количествозанятий') === this.value.replace(' ', '')) {
            blocks[i].style.display = 'block';
        } 
        else {
            blocks[i].style.display = 'none';
        }
        if (this.value === 'Количество занятий') {
            blocks[i].style.display = 'block';
        }
    }
};

Вопрос в том как связать выбор этого селекта с остальными. Чтобы они не взаимоисключали друг-друга.

Comments

[Kovalsky]

Куча плагинов для этого есть. Вот например.

[STINGRAY_DEVELOP]

Kovalsky, на чистом js хочу реализовать.

[Kovalsky]

OWIII, ну, в целом это ничего сильно не меняет; вы можете посмотреть как реализованы соответствующие плагины и написать так же. Никакой логики на библиотеках там чаще всего не завязано, функции из библиотек используются часто только как утилиты, то есть переписать ничего не стоит. К тому же часть из них написана без библиотек. А вот тут даже разжёвывают

Answer 1

[ha100790tag]

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

Comments

[STINGRAY_DEVELOP]

Спасибо большое, сейчас буду разбираться в твоем примере. Если что смогу спросить по коду?

[ha100790tag]

OWIII, да, без проблем

[STINGRAY_DEVELOP]

ha100790tag, Я пытаюсь реализовать твой код, вроде все понятно. адаптировал под свою ситуацию. Но. есть одна загвозка. Я не могу понять почему у меня не срабатывает метод Array.from.
То есть без него у меня получается HTMLCollection, и всё отлично выводит список элементов. Но для такой коллекции методы как для массивов не годятся.

Как только добавляю этот метод, то выдает пустой массив. Не знаешь с чем может быть связано?? Уже все перепробовал. Array.prototype.slice.call тоже самое выдает - [].

[ha100790tag]

OWIII, Array.from должен работать сейчас во всех браузерах, кроме IE. Переписал код пен (доступен по той же ссылке) на использование Array.prototype.slice.call и тоже все работает - это должно работать прям во всех браузерах. Кроме Array.prototype.slice.call можно попробовать еще использовать var arr = [].slice.call(htmlCollection); или var arr = [...htmlCollection]; и эффект должен быть тот же.

Если возникают какие то ошибки при работе с Array.prototype.slice.call, то тут уже проблема скорее всего не в Array.from, а где то в другом месте и надо смотреть и разбираться.

[STINGRAY_DEVELOP]

ha100790tag, Спасибо, я реализовал твой способ и всё заработало)))а ты давно пишешь на js?

[ha100790tag]

OWIII, года 3 уже