Как реализовать функционал множественного выбора в select?

Что такое множественный выбор в select?

Атрибут multiple в HTML-элементе <select> позволяет пользователю выбирать более одного варианта из выпадающего списка. Это полезно, когда нужно дать возможность выбрать несколько категорий, тегов или других множественных значений.

Как это работает?

При добавлении атрибута multiple элемент <select> превращается в список, где можно выделить несколько пунктов. Для выбора нескольких значений пользователь зажимает клавишу Ctrl (или Cmd на Mac) и кликает по нужным опциям. На мобильных устройствах обычно появляется интерфейс с чекбоксами.

Пример кода

<form action="/submit" method="POST">
  <label for="colors">Выберите цвета:</label>
  <select name="colors[]" id="colors" multiple size="4">
    <option value="red">Красный</option>
    <option value="green">Зеленый</option>
    <option value="blue">Синий</option>
    <option value="yellow">Желтый</option>
  </select>
  <button type="submit">Отправить</button>
</form>

В этом примере атрибут name="colors[]" указывает, что на сервер будет отправлен массив выбранных значений. Атрибут size="4" задает количество видимых строк.

Обработка на сервере

На серверной стороне (например, на PHP) вы получите массив значений:

// PHP
$selectedColors = $_POST['colors']; // ['red', 'blue']

В JavaScript можно получить выбранные значения через свойство selectedOptions:

const select = document.getElementById('colors');
const selected = Array.from(select.selectedOptions).map(opt => opt.value);
console.log(selected); // ['red', 'blue']

Вывод

Используйте атрибут multiple в <select>, когда нужно дать пользователю возможность выбрать несколько вариантов из списка. Это простое и нативное решение без дополнительных библиотек, но для лучшего UX на десктопах стоит добавить подсказку о зажатии Ctrl.