Получение текущих опций

В библиотеке Choices.js каждая инициализация формирует отдельный экземпляр с внутренней конфигурацией, доступной через объект config. Он содержит все параметры, переданные при создании, а также значения, установленные по умолчанию.

const choices = new Choices('#sel ect', {
  removeItemButton: true,
  searchEnabled: true,
  shouldSort: false,
  maxItemCount: 5
});

console.log(choices.config);

Объект config представляет собой «снимок» текущих настроек экземпляра. Он не всегда является реактивным в смысле автоматического обновления внешнего состояния, однако отражает актуальные параметры, используемые библиотекой в момент обращения.

Ключевые свойства внутри config:

  • searchEnabled — включение/отключение поиска
  • removeItemButton — отображение кнопки удаления выбранных значений
  • shouldSort — сортировка элементов списка
  • maxItemCount — ограничение количества выбранных элементов
  • placeholderValue — текст плейсхолдера
console.log(choices.config.searchEnabled);
console.log(choices.config.maxItemCount);

Получение текущих выбранных значений

Одним из основных способов анализа текущего состояния экземпляра является метод getValue. Он возвращает выбранные элементы в зависимости от режима вызова.

Возврат только значений

const values = choices.getValue();
console.log(values);

Результатом является массив строк или чисел, соответствующих выбранным значениям.

Возврат объектов выбора

const fullItems = choices.getValue(true);
console.log(fullItems);

При передаче true возвращается массив объектов, содержащих полную информацию об элементах:

  • value
  • label
  • selected
  • disabled
  • дополнительные пользовательские атрибуты

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

Доступ к исходному списку опций

Внутренний список доступных опций хранится в структуре состояния экземпляра. В актуальных версиях Choices.js используется внутреннее хранилище, доступ к которому осуществляется через объект состояния.

const store = choices._store;
console.log(store);

Хотя свойство _store считается внутренним, оно содержит актуальные данные о всех элементах.

Основной интерес представляют:

  • store.choices — список всех доступных опций
  • store.items — текущие выбранные элементы
  • store.groups — сгруппированные элементы (если используются группы)
console.log(choices._store.choices);

Каждый элемент списка содержит структуру:

{
  id: 1,
  value: 'option_1',
  label: 'Option 1',
  selected: false,
  disabled: false,
  groupId: null
}

Анализ текущего состояния выбора

Текущее состояние выбора формируется на основе синхронизации между внутренними списками choices и items. Различие между ними определяет доступные и выбранные элементы.

const state = choices._store;

const allOptions = state.choices;
const selectedItems = state.items;
const availableOptions = allOptions.filter(item => !item.selected);

Такой подход позволяет получить полную картину состояния:

  • все доступные опции
  • выбранные элементы
  • оставшиеся доступные значения

Чтение конфигурации после изменения состояния

Конфигурация экземпляра может быть частично изменена во время выполнения через методы API, например:

choices.setChoiceByValue('value_1');

После подобных операций объект config сохраняет исходные настройки, однако состояние выбора изменяется и отражается в items.

console.log(choices.config);
console.log(choices.getValue(true));

Таким образом разделяются:

  • статическая конфигурация (config)
  • динамическое состояние (store, getValue)

Получение параметров через элемент DOM

Choices.js также связывается с исходным DOM-элементом <select> или <input>. Исходные данные могут быть частично восстановлены из DOM, однако они не всегда отражают текущее состояние после инициализации.

const element = document.querySelector('#select');

console.log(element.options);
console.log(element.value);

В случае множественного выбора:

const selected = Array.fr om(element.selectedOptions).map(o => o.value);
console.log(selected);

Однако после инициализации библиотекой DOM становится лишь синхронизированным представлением, тогда как основное состояние хранится внутри экземпляра.

Сравнение конфигурации и состояния

Разделение между конфигурацией и текущими опциями можно формализовать следующим образом:

  • config — набор правил поведения компонента
  • store.choices — полный набор доступных элементов
  • store.items — текущее состояние выбора
  • getValue() — публичный API для получения выбранных данных
const configSnapshot = choices.config;
const allChoices = choices._store.choices;
const selected = choices.getValue(true);

console.log({
  configSnapshot,
  allChoices,
  selected
});

Особенности актуализации данных

Изменение состояния через API Choices.js приводит к обновлению внутренних структур без изменения исходного объекта конфигурации. Это важно при построении логики, зависящей от текущего состояния интерфейса.

choices.setChoiceByValue('value_2');
choices.removeActiveItems();
choices.clearStore();

После выполнения операций:

console.log(choices.getValue());
console.log(choices._store.items);

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

Получение группированных опций

При использовании групп (optgroup) структура store.groups содержит информацию о принадлежности элементов.

console.log(choices._store.groups);

Каждая группа содержит:

  • идентификатор
  • название
  • список связанных элементов
const groups = choices._store.groups;

groups.forEach(group => {
  console.log(group.value);
  console.log(group.activeItems);
});

Это позволяет анализировать распределение опций по категориям и текущее состояние каждой группы.

Внутренние различия между версиями API

В разных версиях Choices.js доступ к текущим данным может незначительно отличаться. Основные публичные методы остаются стабильными:

  • getValue()
  • setChoiceByValue()
  • clearStore()

Внутренние структуры (_store, _currentState) не являются частью публичного API, но часто используются для диагностики состояния и получения расширенной информации о текущих опциях.

console.log(choices.getValue(true));
console.log(choices.config);
console.log(choices._store.choices);
Оглавление