Создание простого селекта

Работа с Choices.js начинается с обычного HTML-элемента <select>, который библиотека преобразует в расширенный, управляемый компонент. Основная идея заключается в том, что стандартный селект остаётся источником данных, а Choices.js добавляет поверх него функциональность поиска, кастомного отображения и управления выбором.

Минимальная структура HTML выглядит следующим образом:

<select id="simple-select">
  <option value="apple">Яблоко</option>
  <option value="banana">Банан</option>
  <option value="orange">Апельсин</option>
  <option value="grape">Виноград</option>
</select>

Ключевым моментом является сохранение семантики нативного элемента. Choices.js не заменяет его полностью, а оборачивает и синхронизирует состояние.

Подключение библиотеки Choices.js

Перед созданием селекта необходимо подключить стили и скрипт библиотеки. Без CSS компонент будет функциональным, но визуально не оформленным.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

Подключение через CDN обеспечивает быстрый старт без сборщика и установки пакетов. В проектах с модульной архитектурой предпочтительнее установка через npm:

npm install choices.js

Инициализация простого селекта

После загрузки библиотеки необходимо создать экземпляр Choices и передать в него DOM-элемент <select>.

const element = document.getElementById('simple-select');

const choices = new Choices(element);

После выполнения этого кода стандартный селект превращается в управляемый компонент с поддержкой кастомного UI.

Внутри происходит:

  • создание обёртки над исходным <select>
  • генерация DOM-структуры интерфейса
  • синхронизация выбранного значения
  • подготовка событий управления

Поведение по умолчанию

Без дополнительных параметров Choices.js активирует набор стандартных возможностей:

  • отображение выбранного значения в кастомной панели
  • кликабельный список опций
  • базовая клавиатурная навигация
  • поддержка выбора одного значения
  • синхронизация с оригинальным <select>

При этом исходный элемент остаётся в DOM и участвует в форме при отправке данных.

Настройка минимальной конфигурации

Даже для простого селекта можно задать базовые параметры, влияющие на поведение компонента.

const choices = new Choices(element, {
  searchEnabled: false,
  itemSelectText: ''
});

Разбор ключевых опций:

  • searchEnabled — отключает строку поиска, упрощая интерфейс для небольших списков
  • itemSelectText — текст подсказки при наведении на элементы списка

Для простого селекта с ограниченным числом вариантов отключение поиска часто оправдано, так как ускоряет взаимодействие.

Работа с одиночным выбором

Choices.js по умолчанию использует режим одиночного выбора, если в <select> не указан атрибут multiple.

<select id="simple-select">
  <option value="1">Первый вариант</option>
  <option value="2">Второй вариант</option>
</select>

При этом библиотека:

  • заменяет стандартный UI на кастомный dropdown
  • обеспечивает визуальное выделение выбранного элемента
  • обновляет значение select.value

Состояние всегда синхронизировано, что позволяет использовать компонент в обычных HTML-формах без дополнительной логики.

Программное управление значением

Choices.js предоставляет API для управления выбранным значением после инициализации.

const choices = new Choices(element);

// установка значения
choices.setChoiceByValue('banana');

Метод setChoiceByValue работает с value опций, а не с их текстовым содержимым.

Также доступно получение текущих значений через оригинальный элемент:

console.log(element.value);

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

В простом селекте можно сбросить выбранное значение:

choices.removeActiveItems();

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

Обработка событий

Choices.js генерирует события, позволяющие отслеживать изменения состояния селекта.

element.addEventListener('change', (event) => {
  console.log(event.target.value);
});

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

choices.passedElement.element.addEventListener(
  'choice',
  (event) => {
    console.log(event.detail);
  }
);

События позволяют интегрировать селект в сложные интерфейсы, где требуется реактивное поведение.

Запрет на редактирование и ограничения

Для простого селекта часто важно контролировать возможность изменения состояния.

const choices = new Choices(element, {
  searchEnabled: false,
  shouldSort: false
});

Опция shouldSort отключает автоматическую сортировку, сохраняя порядок, заданный в HTML.

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

Отключённые опции в <select> автоматически поддерживаются библиотекой.

<option value="disabled" disabled>Недоступно</option>

Choices.js отображает такие элементы, но блокирует их выбор, сохраняя нативное поведение HTML.

Стилизация и структура DOM

После инициализации библиотека создаёт дополнительную структуру:

  • внешний контейнер
  • скрытый оригинальный <select>
  • кастомный input-псевдоэлемент
  • выпадающий список

Это позволяет полностью контролировать внешний вид через CSS, не нарушая работу формы.

Ключевые классы:

  • .choices
  • .choices__inner
  • .choices__list
  • .choices__item

Использование этих классов позволяет адаптировать компонент под дизайн системы.

Инициализация нескольких простых селектов

Choices.js можно применять к группе элементов без дублирования кода.

document.querySelectorAll('.js-choice').forEach((el) => {
  new Choices(el, {
    searchEnabled: false
  });
});

HTML:

<select class="js-choice">
  <option value="a">A</option>
  <option value="b">B</option>
</select>

<select class="js-choice">
  <option value="x">X</option>
  <option value="y">Y</option>
</select>

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

Особенности поведения в формах

Choices.js не нарушает стандартное поведение HTML-форм:

  • значение сохраняется в <select>
  • форма отправляет данные без дополнительного кода
  • валидация работает на уровне браузера
  • required поддерживается нативно
<select id="simple-select" required>
  <option value="">Выберите значение</option>
  <option value="1">Один</option>
</select>

При отсутствии выбора форма будет считаться невалидной.

Типичные сценарии использования простого селекта

Базовый селект на Choices.js применяется в случаях, когда требуется:

  • улучшенный внешний вид стандартного dropdown
  • единообразие интерфейса в приложении
  • минимальная логика без поиска и сложных взаимодействий
  • интеграция с формами без изменения backend-логики

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

Оглавление