Как сделать фильтр на JS?

Здравствуйте. Очень сильно нужна Ваша помощь.
Есть страница на которой присутствует фильтер в виде < option >
Ниже есть блоки с врачами. Вопрос: как реализовать этот самый фильтр? Что бы при клике допустим на пункт "Хирург" открывались дивы врачей с классом .surgeon
  • Вопрос задан
  • 8179 просмотров
Решения вопроса 2
Пригласить эксперта
Ответы на вопрос 1
Immortal_pony
@Immortal_pony
Для начала select'у присвоить какое-то имя а в value каждого option'а прописать класс необходимого div'а:
<select name="doctors">
    <option disabled selected>Все специальности</option>
    <option value="pediatric-dentist">Детский стамотолог</option>
    <option value="surgeon">Хирург</option>
</select>


Не забудьте и div'ам его прописать.
<div class="item">
    <div class="doctor surgeon">
        <!-- Дальнейший код карточки -->
    </div>
</div>


Потом написать обработчик, который будет отслеживать изменения выпадающего списка и показывать соответствующие блоки.
$('[name="doctor"]').on('change', function() { 
    var selector = '.' + $(this).val();
    var chosenItems = $(selector).closest('.item');

    // Сокрытие всех блоков
    $('.item').hide();

    // Показ выбранных блоков
    chosenItems.show();
});


Не заметил, что в тэгах нет JQuery. На всякий случай продублирую на чистом JS
var toggle = document.querySelector('[name="doctors"]');

toggle.addEventListener('change', function() { 
    var chosenClass = this[this.selectedIndex].value;
    var items = document.querySelectorAll('.item');

    Array.prototype.forEach.call(items, function(item) {
        var child = item.children[0];
        var childClasses = child.className.split(' ');

        if (childClasses.indexOf(chosenClass) === -1) {
            item.style.display='none';
        } else {
            item.style.display='block';
        }
    });
});


Пример: https://jsfiddle.net/t3hy7mjr/2/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы