Компонент «Селект»

Компонент позволяет настраивать внешний вид стандартного элемента формы <select> и его пунктов <option>, а также реализует дополнительные возможности.

Расположение компонента

Файлы компонента находятся в папке src/components/forms/select. Здесь вы найдёте JS-файл компонента, HTML-файл с примером кода, а также SCSS-файл для стилизации.

Использование компонента

В HTML непосредственно к тегу <select> добавьте атрибут data-fls-select:

<select data-fls-select name="form[]">
  <option value="" selected>Плейсхолдер</option>
  <option value="2">Пункт</option>
  <option value="3">Пункт</option>
  <option value="4">Пункт</option>
</select>

Настройки и функционал модуля

Для подключения того или иного функционала модуля используются различные HTML-атрибуты.

Атрибуты для тега <select>

• multiple — включает множественный выбор.
• disabled — делает селект недоступным.
• data-fls-select-class-modif="имя-класса" — добавляет модификатор конкретному селекту. В результате получится select select_имя-класса.
• data-fls-select-tags — режим тегов, доступный только для multiple. Позволяет выводить выбранные значения в виде тегов с крестиком для удаления. Теги можно разместить в другом блоке, указав его CSS-селектор в качестве значения атрибута.
• data-fls-select-scroll — включает прокрутку списка. Дополнительно можно подключить кастомный скролл SimpleBar в js/app.js. Числовое значение атрибута ограничивает высоту контейнера выпадающего списка.
• data-fls-select-checkbox (в работе) — стилизация элементов под чекбоксы, только для multiple.
• data-fls-select-show-selected — отключает скрытие выбранного элемента.
• data-fls-select-search — позволяет искать по списку.
• data-fls-select-speed — задаёт скорость открытия и закрытия списка в миллисекундах. По умолчанию — 150.
• data-fls-select-open — селект сразу открыт.
• data-fls-select-submit — отправляет форму при изменении выбранного значения.
• data-fls-select-pseudo-label="заголовок" — добавляет к заголовку селекта псевдоэлемент с указанным текстом, а также класс _select-pseudo-label.

Атрибуты для тега <option>

• data-fls-select-class="имя-класса" — добавляет класс.
• data-fls-select-asset="путь к картинке или текст" — добавляет в элемент списка структуру из двух колонок с указанными данными.
• data-fls-select-href="адрес ссылки" — добавляет ссылку к элементу списка.
• data-fls-select-href-blank — открывает ссылку в новом окне.

Атрибуты для плейсхолдера

Плейсхолдер — это элемент <option> с пустым значением value.

• data-fls-select-label — добавляет label к селекту.
• data-fls-select-show — показывает плейсхолдер в списке, только для одиночного выбора.

Атрибуты для других элементов

data-fls-select-one — селекты внутри элемента с этим атрибутом будут открываться только по одному. При открытии одного селекта другой открытый селект закрывается.

<select data-fls-select data-fls-select-submit data-fls-select-scroll data-fls-select-class-modif="form" name="form[]">
  <option value="" selected>Плейсхолдер</option>
  <option value="2">Пункт</option>
  <option data-fls-select-href="about.html" value="3">Пункт-ссылка</option>
  <option value="4">Пункт</option>
</select>

События

После каждого выбора элемента селекта срабатывает событие selectCallback. Его можно отследить в любой части кода:

document.addEventListener("selectCallback", function (e) {
  // Текущий селект
  const currentSelect = e.detail.select;
});