Выбор опции в select box с помощью JavaScript: руководство

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

document.querySelector('#selectBox').value = 'optionValue';

#selectBox следует заменить на идентификатор вашего элемента <select>, а 'optionValue' на значение необходимого варианта. Этот код изменит выбранное значение в выпадающем списке.

Подробное объяснение

Чтобы разобраться, как задать значение для <select>, давайте разделим этот процесс на этапы.

1. Выбор элемента:

var selectBox = document.getElementById('selectBox'); // или используйте querySelector

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

2. Установка значения:

selectBox.value = 'optionValue';

3. Уведомление об изменении:

selectBox.dispatchEvent(new Event('change'));

Соблюдение этих шагов гарантирует корректное задание значения и срабатывание события change для обновления обработчиков.

Расширенный функционал

Рассмотрим возможности выполнения более сложных действий.

Метод с использованием jQuery

Если вы работаете с jQuery, код станет ещё проще:

$('#selectBox').val('optionValue').change();

Работа с динамически изменяемым содержимым

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

if (document.querySelector('#selectBox option[value="optionValue"]')) {
    document.querySelector('#selectBox').value = 'optionValue';
}

Кросс-браузерность

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

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

Демонстрируем процесс на примере дирижирования оркестром:

Вы — дирижёр🎵:
- Скрипка (значение 'violin')
- Труба (значение 'trumpet')
- Саксофон (значение 'saxophone')
- Фортепиано (значение 'piano')

Представим, что вы хотите сыграть соло на фортепиано. Для этого вы даёте команду:

document.querySelector('select').value = 'piano';

Результат:

До: [🎻, 🎺, 🎷, 🎹]
После: [          🎹]

Итак, вы мастерски исполнили соло на пиано!

Обработка и предотвращение исключений

Обратим внимание на сложные моменты и способы их решения.

Некорректное значение

Если вы зададите несуществующее значение, это действие не приведёт к изменению:

selectElement.value = 'flute'; // Такого варианта, как "флейта", не существует!

Следите за соответствием чередуемых значений.

Задержка динамической загрузки

Необходимо дождаться полной загрузки опций, особенно при использовании AJAX, перед тем как задавать значение:

loadOptions().then(() => {
    selectElement.value = 'piano';
});

Триггер обработчика событий

Иногда обработчики не реагируют на программные изменения. Чтобы активировать их, отправьте событие:

var event = new Event('change', { bubbles: true });
selectElement.dispatchEvent(event); // "Внимание, партия изменилась!"

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

1. <select>: Элемент HTML Select — HTML: HyperText Markup Language | MDN — информация об элементе <select>.
2. HTMLElement: событие change — Web API | MDN — описание событий изменений элементов формы.
3. Document: метод querySelector() — Web API | MDN — подробно о методе querySelector().
4. HTML DOM метод Document getElementById() — ознакомьтесь с getElementById().
5. Свойства и методы форм — learn.javascript.ru — основы работы с элементами формы.
6. Использование объектов FormData — Web API | MDN — познакомьтесь с объектами FormData.
7. .val() — Документация API jQuery — знакомство с методом .val() в jQuery.