Работа с multiple select в JavaScript: получение значений

Быстрый ответ

Мгновенно получить выбранные значения можно при помощи этой компактной строки кода на JavaScript:

let selected = [...document.querySelector('#selectId').selectedOptions].map(opt => opt.value);

Замените '#selectId' на ID вашего элемента select, и массив selected будет состоять из всех выбранных значений.

Рассмотрим методы

Всё обсуждаемое решение эффективно, однако давайте разберёмся с его механизмом работы и рассмотрим альтернативные способы достижения той же цели.

Использование свойства selectedOptions

В HTML5 представлено удобное свойство selectedOptions:

const selectBox = document.getElementById('selectId');
const selectedValues = Array.from(selectBox.selectedOptions).map(option => option.value);
// Это то же самое, что и в предыдущем `selectedOptions`!

Подробнее об этом расскажет наш спикер на видео

Классический цикл

Если нам нужно работать с классикой языка или с старыми браузерами, не знакомыми с selectedOptions, предложим следующий вариант:

const selected = [];
const options = document.getElementById('selectId').options;
for (let opt of options) {
  if (opt.selected) selected.push(opt.value);
  // Ага! В ряды массива, если вы отмечены.
}

Магия jQuery 🎩

Несмотря на то что основной акцент мы делаем на чистом JavaScript, вот ещё вариант для тех, кто предпочитает jQuery:

let selected = $('#selectId').val();
// jQuery говорит: "Почему бы тебе не полететь, когда ты можешь ползти?"

Управление атрибутом selected

С осторожностью относитесь к атрибуту selected: он определяет предустановленный выбор:

document.querySelector('#selectId option').setAttribute('selected', true);
// "Первому судьба назначила быть избранным!"

Визуализация

Представьте список с множественным выбором в HTML как кеглю, полную разноцветных ванночек для купания (🛁💣):

<select multiple>
  <option value="rose">🌹 Роза</option>
  <option value="peppermint">🌿 Мята</option>
  <option value="lavender">💜 Лаванда</option>
</select>

Соберите все выбранные ванночки (values) в одну корзину array:

let selectedScents = Array.from(selectElement.options)
                      .filter(option => option.selected)
                      .map(option => option.value);

Что у нас в корзине:

| Ваши ароматы         |
| -------------------- |
| 🌹 Роза              |
| 🌿 Мята              |
| (💜 Лаванда)         |

Примечание: (💜 Лаванда) включена только если выбрана

Результат: Ваша корзина с ароматами! 🧺✨

Современный JavaScript

Опишем современные техниики JavaScript, применимые для решения этой задачи.

Деструктуризация с querySelectorAll

Комбинация querySelectorAll и деструктуризации делает код современным и читаемым:

const options = document.querySelectorAll('#selectId option:checked');
const values = [...options].map(({ value }) => value);
// "Ух ты, я умею делать это без рук!"

Синтетическая форма с filter и map

Используйте filter и map для сжатия и облагораживания вашего кода:

const options = document.getElementById('selectId').options;
const selected = Array.from(options).filter(o => o.selected).map(o => o.value);
// "Заберём только тех, кто успел покоситься за душу!"

Рекомендации для гармоничного решения

• Проконтролируйте правильность ID и убедитесь, что атрибут multiple присутствует в <select>.
• Установите вариант выбора по умолчанию, чтобы он отображался сразу же при загрузке страницы.
• Используйте console.log() для дополнительной проверки — это словно сверка попытка проверить снова числа на лотерейном билете.
• Вспомните о том, что возможно понадобится преобразовать ваш код для поддержки старых браузеров при помощи Babel или подобных инструментов.

Советы по отладке

Представлены советы, помогающие избежать ошибок.

Проверка предустановленных значений

Предустановленные значения могут внести путаницу. Следите за ними:

console.log(document.getElementById('selectId').value);
// "Как ты заряжаешься перед сном?"

Проверка работы в различных браузерах

Тщательно проверьте свой код в различающихся браузерах и устройствах. Пусть он будет универсальным, а не работающим только у вас на компьютере.

Полезные материалы

1. HTMLSelectElement: Свойство options – Web APIs | MDN — официальная документация MDN по свойству options.
2. .val() | jQuery API Documentation — официальное руководство jQuery для .val(): колдунство со значениями.
3. javascript – как получить все выбранные значения из списка с множественным выбором? – Stack Overflow — сообщество Stack Overflow обменивается опытом работы с множественным выбором в списке.
4. <select>: HTML Элемент Select – HTML: Гипертекстовый язык разметки | MDN — полное руководство MDN по элементу <select>.
5. Свойства и методы формы — объяснение до деталей элементов формы от JavaScript.info.