Как сделать сортировку с двумя селектами?
Пытаюсь сделать сортивроку на сайте, но не могу понять как наладить взаимодейтссвие с двумя селектами.
Что бы работали вместе.
Опции могут пересекаться между собой и если в двух селектах выбрать "Все" то отоброзяться все блоки.
https://codepen.io/jivoy_web/pen/QWoXJjG
Дополнительно:
повесить один обработчик на оба селекта, в котором пересчитывать каждый раз
snippet
- Спасибов вам. Очень помогли. Только не работало когда выбрано "все" в каком либо из селектов, но я костылей из условий написал...вродебы работает
- verstak2020, странно, у меня работает.
- verstak2020, да блин )))
все и каждый по своему
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации сортировки с помощью двух селектов вам потребуется использовать JavaScript или jQuery. В данном примере я покажу вам как это можно сделать с использованием jQuery.
Для начала, у вас должен быть HTML код с двумя селектами, например:
```html
По имени
По возрасту
По возрастанию
По убыванию
```
Теперь вам нужно написать JavaScript код с использованием jQuery, который будет обрабатывать изменения в селектах и сортировать элементы списка в соответствии с выбранными значениями:
```pre lang="php"
$('#sortBy, #sortOrder').on('change', function() {
var sortBy = $('#sortBy').val();
var sortOrder = $('#sortOrder').val();
var list = $('#list');
var items = list.children('li').get();
items.sort(function(a, b) {
var aValue = $(a).data(sortBy);
var bValue = $(b).data(sortBy);
if (sortOrder === 'asc') {
return aValue.localeCompare(bValue);
} else {
return bValue.localeCompare(aValue);
}
});
$.each(items, function(index, item) {
list.append(item);
});
});
```
Этот код будет сортировать элементы списка в соответствии с выбранными значениями в селектах. При изменении значений в селектах, список будет автоматически пересортировываться.
Надеюсь, данное объяснение поможет вам реализовать сортировку с двумя селектами на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.