Работа с select-элементами

Umbrella JS — лёгкая библиотека для манипуляций с DOM, которая сочетает простоту jQuery с современными подходами JavaScript. Одной из частых задач при работе с формами является управление <select>-элементами: получение выбранного значения, установка значения программно, динамическое добавление или удаление опций.

Получение выбранного значения

Для получения текущего выбранного значения <select> используется метод .val(). Он возвращает значение выбранного <option>.

u('#mySelect').val(); // Вернёт значение выбранного option

Если <select> позволяет множественный выбор (multiple), метод .val() вернёт массив всех выбранных значений.

const values = u('#myMultiSelect').val(); 
// ["value1", "value3"]

Установка выбранного значения

Для установки выбранного значения <select> также используется метод .val(). Если значение совпадает с value одного из <option>, оно будет выбрано.

u('#mySelect').val('option2'); // Установит выбранным второй option

Для множественного выбора можно передать массив значений:

u('#myMultiSelect').val(['value1', 'value2']);

Если переданное значение отсутствует среди <option>, выбор не изменится.

Получение текста выбранного option

Метод .val() возвращает значение, но иногда нужно получить текст выбранного <option>. Для этого используется цепочка методов .find() и .text():

const selectedText = u('#mySelect').find('option:selected').text();

Для множественного выбора можно пройтись по всем выбранным:

const selectedTexts = u('#myMultiSelect')
  .find('option:selected')
  .map(el => el.textContent);

Добавление и удаление опций

Добавление нового <option> выполняется с помощью метода .append():

u('#mySelect').append('<option value="new">Новая опция</option>');

Можно создавать элементы программно через document.createElement и передавать в .append():

const option = document.createElement('option');
option.value = 'dynamic';
option.text = 'Динамическая опция';
u('#mySelect').append(option);

Удаление опций происходит через метод .remove():

u('#mySelect').find('option[value="old"]').remove();

Для очистки всего списка можно использовать .html(''):

u('#mySelect').html(''); // Удаляет все опции

Обработка изменений select

Событие изменения выбора <select> отслеживается через .on('change', ...):

u('#mySelect').on('change', function(e) {
    const value = u(this).val();
    console.log('Выбранное значение:', value);
});

Для множественного выбора можно получить массив всех выбранных значений:

u('#myMultiSelect').on('change', function() {
    const values = u(this).val();
    console.log('Выбранные значения:', values);
});

Деактивация и активация select

Для управления состоянием <select> используются методы .attr() и .removeAttr():

u('#mySelect').attr('disabled', true);   // Деактивировать
u('#mySelect').removeAttr('disabled');   // Активировать

Работа с группами опций (optgroup)

Umbrella JS позволяет легко манипулировать <optgroup> и их <option>:

// Добавление нового option в существующую группу
u('#mySelect optgroup[label="Группа 1"]').append('<option value="extra">Дополнительно</option>');

// Удаление всех опций из группы
u('#mySelect optgroup[label="Группа 2"] option').remove();

Динамическая замена всего списка опций

Для случаев, когда нужно полностью обновить список <select> удобно использовать .html():

const options = [
  {value: '1', text: 'Первый'},
  {value: '2', text: 'Второй'},
  {value: '3', text: 'Третий'}
];

const html = options.map(o => `<option value="${o.value}">${o.text}</option>`).join('');
u('#mySelect').html(html);

Получение и установка состояния по индексу

Umbrella JS поддерживает доступ к <option> по индексу через метод .eq():

// Получить текст второй опции
const text = u('#mySelect option').eq(1).text();

// Сделать третью опцию выбранной
u('#mySelect option').eq(2).attr('selected', true);

После изменения атрибута selected рекомендуется вызвать .val() или обновить выбор через свойство selectedIndex, чтобы браузер корректно отразил изменение.

Совмещение с другими методами Umbrella

Все методы работы с <select> легко комбинируются с другими функциями библиотеки:

  • .each() для перебора опций.
  • .map() для получения массивов значений или текста.
  • .filter() для выборки по определённому критерию.
  • .closest() для поиска родительских форм и блоков.

Пример фильтрации и выбора:

u('#mySelect option').filter(el => el.value.startsWith('a')).attr('selected', true);

Этот подход позволяет создавать динамические интерфейсы с <select> без лишнего кода.

Работа с <select> в Umbrella JS строится на простых и понятных методах .val(), .find(), .append(), .remove() и событиях .on('change'). Эти инструменты обеспечивают полный контроль над выбором, динамическим наполнением списка и взаимодействием с пользователем.

Оглавление