Чтобы реализовать сортировку с двумя селектами на языке JavaScript, мы можем воспользоваться следующим подходом:
1. Создаем HTML разметку с двумя селектами и элементом, который будет содержать отсортированные данные, например, таблицу:
<select id="sortField"> <option value="name">Имя</option> <option value="age">Возраст</option> </select> <select id="sortOrder"> <option value="asc">По возрастанию</option> <option value="desc">По убыванию</option> </select> <table id="data"> <thead> <th>Имя</th> <th>Возраст</th> </thead> <tbody> <!-- Данные будут добавлены с использованием JavaScript --> </tbody> </table>
2. Создаем JavaScript код, который будет осуществлять сортировку по выбранным параметрам:
const data = [ { name: 'Алексей', age: 25 }, { name: 'Иван', age: 30 }, { name: 'Мария', age: 20 } ]; function sortData() { const sortField = document.getElementById('sortField').value; const sortOrder = document.getElementById('sortOrder').value; data.sort((a, b) => { if (sortOrder === 'asc') { return a[sortField] > b[sortField] ? 1 : -1; } else { return a[sortField] < b[sortField] ? 1 : -1; } }); const tableBody = document.querySelector('#data tbody'); tableBody.innerHTML = ''; data.forEach(item => { const row = document.createElement('tr'); const nameCell = document.createElement('td'); nameCell.textContent = item.name; const ageCell = document.createElement('td'); ageCell.textContent = item.age; row.appendChild(nameCell); row.appendChild(ageCell); tableBody.appendChild(row); }); } document.getElementById('sortField').addEventListener('change', sortData); document.getElementById('sortOrder').addEventListener('change', sortData); sortData(); // Инициализация сортировки при загрузке страницы
Этот код сначала определяет текущие параметры сортировки (по полю и порядку), затем сортирует массив data
соответствующим образом. После этого он обновляет таблицу с отсортированными данными.
Теперь при изменении параметров сортировки в селектах, данные в таблице будут пересортировываться в соответствии с новыми параметрами.
Надеюсь, это объяснение поможет вам понять, как реализовать сортировку с двумя селектами на языке JavaScript. Если у вас есть дополнительные вопросы, не стесняйтесь задавать!