Для реализации фильтрации элементов на веб-странице можно использовать тег `<select>` и обработчики событий на JavaScript. Вот пример кода, который демонстрирует, как это можно сделать.
HTML:
```html
<select id="filter">
<option value="all">Все</option>
<option value="class1">Класс 1</option>
<option value="class2">Класс 2</option>
<!-- Добавьте дополнительные опции фильтрации по необходимости -->
</select>
<div class="item class1">Элемент 1 класса 1</div>
<div class="item class2">Элемент 2 класса 2</div>
<div class="item class1">Элемент 3 класса 1</div>
<div class="item class2">Элемент 4 класса 2</div>
```
JavaScript (используя чистый JavaScript без фреймворков):
```javascript
document.addEventListener('DOMContentLoaded', function() {
const filterSelect = document.getElementById('filter');
filterSelect.addEventListener('change', function() {
const selectedClass = this.value; // Получаем выбранное значение фильтра
const items = document.querySelectorAll('.item'); // Получаем все фильтруемые элементы
items.forEach(function(item) {
if (selectedClass === 'all') {
item.style.display = ''; // Показываем элемент, если выбрано "Все"
} else if (item.classList.contains(selectedClass)) {
item.style.display = ''; // Показываем элементы, которые соответствуют выбранному классу
} else {
item.style.display = 'none'; // Скрываем несоответствующие элементы
}
});
});
});
```
Важно применить класс `.item` ко всем элементам, которые вы хотите фильтровать, и потом добавить дополнительные классы, соответствующие каждой категории (`class1`, `class2` и так далее).
При изменении значения в `<select>`, JavaScript-код будет отслеживать это событие и фильтровать элементы в зависимости от выбранного класса, изменяя стиль `display` соответствующих элементов на `none` для сокрытия и на пустую строку для показа.
Это базовый пример, который можно расширить и адаптировать под ваши потребности. Если вам нужно более сложное поведение или вы хотите использовать сторонние библиотеки (например, jQuery), вы можете воспользоваться их функциональностью для более удобной и расширенной обработки событий и манипуляций с DOM.