Как сделать сортировку с двумя селектами?

Чтобы реализовать сортировку с двумя селектами на языке 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. Если у вас есть дополнительные вопросы, не стесняйтесь задавать!