Работа с select и множественным выбором

Библиотека Cash представляет собой компактный инструмент для работы с DOM в стиле jQuery, обеспечивая удобный синтаксис для манипуляций с элементами, событиями и атрибутами. Одним из частых сценариев является работа с <select> элементами, включая поддержку множественного выбора (multiple). Ниже подробно рассматриваются основные методы и приёмы.

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

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

const selectedValue = $('select#single').val();
console.log(selectedValue);

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

const selectedValues = $('select#multi').val();
console.log(selectedValues); // ['option1', 'option3']

Важно помнить, что val() возвращает значения атрибутов value, а не текст опций. Для получения текста выбранных опций потребуется дополнительная обработка:

const selectedTexts = $('select#multi option:selected').map(function() {
    return $(this).text();
}).get();
console.log(selectedTexts);

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

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

$('select#single').val('option2');

Для множественного <select> передается массив:

$('select#multi').val(['option1', 'option3']);

Если переданное значение не соответствует ни одной опции, выбор сбрасывается. При работе с множественным выбором можно использовать метод .prop('selected', true/false) для поэлементного управления:

$('select#multi option').each(function() {
    const val = $(this).val();
    $(this).prop('selected', val === 'option2' || val === 'option4');
});

Работа с событиями изменения

Событие change важно для отслеживания выбора пользователя. В Cash оно подключается так же, как в jQuery:

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

При множественном выборе событие срабатывает после каждой модификации выбранных элементов пользователем.

Получение выбранных элементов через :selected

Cash поддерживает псевдокласс :selected для фильтрации опций:

const selectedOptions = $('select#multi option:selected');
selectedOptions.each(function() {
    console.log($(this).val(), $(this).text());
});

Метод .map() позволяет получить массив значений или текстов:

const values = $('select#multi option:selected').map(function() {
    return $(this).val();
}).get();

.get() преобразует объект Cash в обычный массив JavaScript.

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

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

// Добавление новой опции
$('select#multi').append('<option value="option5">Опция 5</option>');

// Удаление опции
$('select#multi option[value="option3"]').remove();

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

Выбор по условию

Иногда требуется выбирать элементы на основе условия, например, текста или сложной логики:

$('select#multi option').each(function() {
    if ($(this).text().includes('2')) {
        $(this).prop('selected', true);
    }
});

Это позволяет гибко управлять множественным выбором без изменения структуры HTML.

Очистка выбора

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

// Установка пустого массива для множественного select
$('select#multi').val([]);

// Альтернативно через .prop
$('select#multi option').prop('selected', false);

После этого .val() вернёт null или пустой массив в зависимости от типа <select>.

Итоговые рекомендации по работе с множественным select

  • Для получения значений всегда использовать .val().
  • Для динамического выбора элементов удобнее применять .prop('selected', true/false).
  • Для работы с текстом выбранных опций комбинировать :selected с .map() и .get().
  • Добавление и удаление опций через .append() и .remove() обеспечивает полное управление содержимым <select>.
  • Событие change позволяет отслеживать изменения выбора и реагировать на них в реальном времени.

Эти приёмы формируют полный набор инструментов для эффективной работы с <select> элементами и множественным выбором в библиотеке Cash, сохраняя лаконичный и читаемый код.

Оглавление