Атрибут multiple тега <select>
Описание
Атрибут multiple позволяет выбирать несколько вариантов одновременно в элементе <select>. При активации этого атрибута список отображается как прокручиваемая область, где можно выбрать несколько элементов с помощью клавиш Ctrl (Cmd на Mac) или Shift.
<select multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
</select>
Особенности работы:
- Преобразует обычный выпадающий список в прокручиваемое поле
- По умолчанию показывает 4 варианта (можно изменить через атрибут size)
- Для выбора нескольких элементов удерживайте Ctrl (Windows) или Cmd (Mac)
- Значения всех выбранных вариантов отправляются на сервер
Рекомендации:
- Используйте для выбора нескольких значений из большого списка
- Сочетайте с атрибутом size для контроля видимого количества строк
- Добавляйте пояснения по множественному выбору для пользователей
- Для длинных списков рассмотрите альтернативные решения (например, чекбоксы)
Ограничения:
- Неудобен для использования на мобильных устройствах
- Может быть неочевидным для неопытных пользователей
- Требует дополнительного места на странице
- Сложнее стилизовать, чем обычный select
Пример с атрибутом size:
<select multiple size="6">
<option value="jan">Январь</option>
<option value="feb">Февраль</option>
<option value="mar">Март</option>
<option value="apr">Апрель</option>
<option value="may">Май</option>
<option value="jun">Июнь</option>
</select>
Обработка на сервере:
При отправке формы с множественным select, значения передаются как массив. Например, в PHP:
<?php $selectedOptions = $_POST['select_name']; // Массив выбранных значений ?>
JavaScript взаимодействие:
<select id="multiSelect" multiple>
<option value="1">Первый</option>
<option value="2">Второй</option>
<option value="3">Третий</option>
</select>
<button onclick="getSelected()">Получить выбранные</button>
<script>
function getSelected() {
const select = document.getElementById('multiSelect');
const selected = Array.from(select.selectedOptions)
.map(option => option.value);
alert('Выбрано: ' + selected.join(', '));
}
</script>
Стилизация множественного выбора:
<style>
select[multiple] {
min-height: 100px;
width: 200px;
padding: 5px;
border: 2px solid #4a90e2;
border-radius: 4px;
}
select[multiple] option:checked {
background-color: #4a90e2;
color: white;
}
</style>
<select multiple>
<option>Вариант 1</option>
<option>Вариант 2</option>
<option>Вариант 3</option>
</select>
Альтернативные решения:
Для лучшего UX рассмотрите:
- Группу чекбоксов для небольшого количества вариантов
- Специализированные библиотеки (Select2, Chosen, etc.)
- Кастомные решения с div и JavaScript