Как сделать такой фильтр опций на js или jq?
Помогите пожалуйста разобраться, как сделать такой фильтр.
Пытался тут что то сообразить, но выходит не то что необходимо.
https://codepen.io/jivoy_web/pen/XWQXvJb
Смысл в том, что бы при выборе одного или нескольких чекбоксов, показывался один конкретный эдемент из множества предложенных.
К примеру выбираем чекбокс 1, и элемент показывается конкретно под этот чекбокс.
Выбираем чекбоксы 3 и 5, элемент показывается именно под эти чекбоксы.
И т.д, вариации могут быть различными, хоть такой например: выбираем чекбоксы 1, 2, 4 и 5 и должен отоброзится конкретный элемент для них.
Дополнительно:
Собираем селектор на основе состояния чекбоксов (выставлен - класс должен присутствовать, не выставлен - помещаем класс внутрь :not), проверяем фильтруемые элементы на соответствие селектору:
document.querySelector('.options').addEventListener('change', e => { const [ not, has ] = Array.prototype.reduce.call( e.currentTarget.querySelectorAll('input'), (acc, n) => (acc[+n.checked].push(`.${n.value}`), acc), [ [], [] ] ); const selector = `${has.join('')}:not(${not.join(',')})`; for (const n of document.querySelector('.box').children) { n.classList.toggle('hidden', !n.matches(selector)); } }); |
document.querySelector('.options').addEventListener('change', e => { const [ not, has ] = Array.prototype.reduce.call( e.currentTarget.querySelectorAll('input'), (acc, n) => (acc[+n.checked].push(`.${n.value}`), acc), [ [], [] ] ); const selector = `${has.join('')}:not(${not.join(',')})`; for (const n of document.querySelector('.box').children) { n.classList.toggle('hidden', !n.matches(selector)); } });
Или, при обработке элемента перебираем чекбоксы и проверяем, что их состояния соответствуют наличию классов:
const checkboxes = [...document.querySelectorAll('.options input')]; const items = [...document.querySelector('.box').children]; checkboxes.forEach(n => n.addEventListener('change', onChange)); function onChange() { items.forEach(({ classList: cl }) => { cl.toggle('hidden', checkboxes.some(n => n.checked !== cl.contains(n.value))); }); } |
const checkboxes = [...document.querySelectorAll('.options input')]; const items = [...document.querySelector('.box').children]; checkboxes.forEach(n => n.addEventListener('change', onChange)); function onChange() { items.forEach(({ classList: cl }) => { cl.toggle('hidden', checkboxes.some(n => n.checked !== cl.contains(n.value))); }); }
- Большое спасибо, выручили
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания фильтра опций на JavaScript или jQuery, можно использовать следующий подход:
1. Сначала создайте HTML разметку для фильтра. Например, вы можете использовать элемент для списка опций и для поля поиска:
```html
Option 1
Option 2
Option 3
```
2. Далее напишите JavaScript код, который будет фильтровать опции в зависимости от введенного текста в поле поиска. Вот пример такого кода на jQuery:
```html
$(document).ready(function(){
$('#search').on('input', function(){
var value = $(this).val().toLowerCase();
$('#options option').filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
```
3. В этом коде мы добавляем обработчик события 'input' к полю поиска. Когда пользователь вводит текст, мы фильтруем опции списка на основе введенного значения. Мы используем метод toggle() для показа или скрытия опции в зависимости от результата поиска.
4. Теперь у вас должен работать фильтр опций на JavaScript или jQuery. Пользователи смогут вводить текст в поле поиска и видеть только те опции, которые соответствуют их запросу.