Работа с select

Bliss.js предоставляет удобные методы для работы с элементами формы, включая <select>. Ключевым преимуществом является лаконичная работа с выбором опций, обработкой событий и динамическим управлением содержимым селекта.

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

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

var SELECT = Bliss.$('select#countries');
var value = Bliss.val(select);
console.log(value); // Например, 'RU'

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

var selectedValues = Bliss.val('select#fruits'); 
console.log(selectedValues); // ['apple', 'banana']

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

Установка значения происходит также через .val():

Bliss.val('select#countries', 'US'); // Установит опцию с value="US"

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

Bliss.val('select#fruits', ['apple', 'orange']);

Если указано значение, которого нет среди опций, никаких ошибок не возникает — селект останется без выбранной опции.

Динамическое добавление и удаление опций

Bliss.js позволяет легко добавлять и удалять опции <select>:

var select = Bliss.$('select#countries');

// Добавление новой опции
Bliss.create('option', { value: 'DE', text: 'Germany' }).appendTo(select);

// Удаление опции по значению
Bliss.$$('option', select).forEach(function(opt){
    if(opt.value === 'RU') opt.remove();
});

Методы .create() и .appendTo() позволяют создавать новые элементы DOM с заданными свойствами и сразу вставлять их в нужное место. При работе с большим количеством опций это особенно удобно.

Обработка событий изменения

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

Bliss.$('select#countries').on('change', function(e){
    console.log('Выбрано: ', Bliss.val(this));
});

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

Получение текстового содержимого выбранной опции

Иногда важно не только значение (value), но и текст опции:

var select = Bliss.$('select#countries');
var selectedOption = select.options[select.selectedIndex];
var text = selectedOption.text;
console.log(text); // 'United States'

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

var texts = Array.FROM(SELECT.selectedOptions).map(opt => opt.text);
console.log(texts); // ['Apple', 'Banana']

Bliss.js упрощает работу с выбором через DOM, но текстовую обработку приходится делать стандартными методами JavaScript.

Работа с атрибутами <select> и <option>

Bliss.js предоставляет методы для управления атрибутами:

var select = Bliss.$('select#countries');

// Установка атрибута disabled
Bliss.attr(select, 'disabled', true);

// Проверка выбранной опции
var firstOption = Bliss.$$('option', select)[0];
Bliss.attr(firstOption, 'selected', true);

Метод Bliss.attr() позволяет как получать, так и устанавливать значения атрибутов элементов.

Клонирование и копирование опций

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

var original = Bliss.$('select#countries');
var clone = Bliss.create('select');
Bliss.$$('option', original).forEach(function(opt){
    clone.appendChild(opt.cloneNode(true));
});
document.body.appendChild(clone);

Клонирование важно при создании форм с одинаковым набором опций без повторного ручного создания.

Сортировка опций

Сортировка <select> по тексту или значению выполняется через преобразование в массив:

var select = Bliss.$('select#countries');
var options = Array.FROM(select.options);

options.sort(function(a, b){
    return a.text.localeCompare(b.text);
});

options.forEach(function(opt){
    select.appendChild(opt);
});

Такой подход удобен для динамических форм с большим количеством опций.

Поддержка множественного выбора

Множественный выбор задается через атрибут multiple:

Bliss.attr('select#fruits', 'multiple', true);

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

Доступ к выбранным элементам через селекторы

Bliss.js поддерживает поиск выбранных опций через CSS-подобные селекторы:

var selectedOptions = Bliss.$$('option:checked', 'select#fruits');
selectedOptions.forEach(opt => console.log(opt.value, opt.text));

Это особенно полезно для множественных селектов, где нужно быстро получить массив всех выбранных элементов.

Управление видимостью и состоянием селекта

Библиотека позволяет быстро изменять видимость и доступность:

Bliss.hide('select#countries'); // Скрыть
Bliss.show('select#countries'); // Показать
Bliss.attr('select#countries', 'disabled', false); // Сделать доступным

Таким образом, <select> можно динамически включать или отключать в зависимости от условий формы.

Bliss.js объединяет простоту работы с DOM и лаконичные методы управления <select>, включая получение/установку значений, добавление/удаление опций, обработку событий, клонирование и сортировку. Это позволяет создавать динамические и интерактивные формы с минимальным количеством кода.

Оглавление