Инициализация одиночного select

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

Исходный элемент формируется в виде стандартного select:

<select id="city-select">
  <option value="msk">Москва</option>
  <option value="spb">Санкт-Петербург</option>
  <option value="kzn">Казань</option>
</select>

Инициализация Choices.js выполняется через создание экземпляра класса Choices, в который передаётся DOM-элемент:

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

const cityChoices = new Choices(element);

После выполнения инициализации стандартный <select> заменяется кастомизированной структурой, при этом исходные значения и атрибуты сохраняются внутри внутреннего состояния библиотеки.

Поведение одиночного выбора

В режиме single select Choices.js обеспечивает строгое поддержание одного выбранного значения. При выборе нового элемента предыдущий выбор автоматически заменяется.

Ключевые характеристики поведения:

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

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

Использование конфигурации при инициализации

Choices.js принимает второй параметр — объект конфигурации, который позволяет управлять поведением компонента.

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

Основные параметры, влияющие на одиночный select:

  • searchEnabled — включает или отключает строку поиска
  • shouldSort — определяет сортировку элементов
  • itemSelectText — текст подсказки при наведении
  • placeholderValue — текст плейсхолдера

Пример с настройкой плейсхолдера:

const cityChoices = new Choices(element, {
  placeholderValue: 'Выбор города',
  searchEnabled: false
});

Работа с placeholder и пустым значением

Одиночный select часто включает пустое значение, используемое как начальное состояние.

<select id="city-select">
  <option value="">Выберите город</option>
  <option value="msk">Москва</option>
  <option value="spb">Санкт-Петербург</option>
</select>

Choices.js интерпретирует пустой option как placeholder при соответствующей конфигурации:

const cityChoices = new Choices(element, {
  placeholder: true,
  placeholderValue: 'Выберите город',
  removeItemButton: false
});

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

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

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

cityChoices.setChoiceByValue('kzn');

Смена значения через API эквивалентна пользовательскому выбору из интерфейса.

Дополнительно доступны методы:

cityChoices.getValue();
cityChoices.clearStore();

getValue() возвращает текущее состояние выбора, включая значение и метаданные выбранного option.

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

Компонент генерирует события, синхронизированные с состоянием оригинального select.

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

Choices.js также предоставляет собственные события через API экземпляра:

  • addItem
  • removeItem
  • change

Пример подписки:

cityChoices.passedElement.element.addEventListener(
  'addItem',
  function(event) {
    console.log(event.detail.value);
  }
);

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

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

cityChoices.setChoices([
  { value: 'msk', label: 'Москва' },
  { value: 'ekb', label: 'Екатеринбург' }
], 'value', 'label', true);

Четвёртый параметр управляет очисткой текущих элементов перед обновлением.

Особенности синхронизации состояния

Внутреннее состояние Choices.js связано с DOM-элементом <select>. Это обеспечивает:

  • корректную отправку формы без дополнительных обработчиков
  • сохранение значения при сабмите
  • совместимость с серверной обработкой форм

Любое изменение через UI или API приводит к обновлению selectedIndex и соответствующего value у исходного элемента.

Ограничение множественного выбора

Для одиночного select важно отсутствие флага removeItemButton в контексте множественного выбора, поскольку он не применяется к single mode. Поведение строго фиксируется одним активным элементом, а попытки добавления дополнительных значений игнорируются на уровне логики компонента.

Инициализация с предустановленным значением

Если исходный <select> содержит выбранный option, Choices.js автоматически подхватывает его при инициализации:

<select id="city-select">
  <option value="msk">Москва</option>
  <option value="spb" selected>Санкт-Петербург</option>
</select>

После создания экземпляра:

const cityChoices = new Choices(element);

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

Оглавление