Методы получения информации

Библиотека Choices.js строит работу вокруг внутреннего состояния компонента, которое синхронизируется с исходным элементом формы (select, input) и объектной моделью выбранных элементов. Любое извлечение информации опирается на экземпляр Choices, созданный при инициализации.

Ключевая особенность архитектуры — разделение данных на три уровня:

  • сырой DOM-значение (значение элемента формы)
  • логическое состояние выбора (selected items внутри Choices)
  • объектные данные choices (полные структуры элементов с label/value/id/disabled и т.д.)

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

Получение текущего значения: getValue()

Основной метод извлечения выбранного значения — getValue().

Он возвращает текущее состояние выбора в зависимости от режима компонента:

  • в одиночном выборе — строку или объект значения
  • в множественном выборе — массив значений

Использование:

const value = choices.getValue();

Поведение зависит от конфигурации:

  • singleSelect → возвращается одно значение
  • multiple → возвращается массив значений

Метод работает с уже нормализованными данными Choices.js, а не с DOM напрямую.

Полные объекты выбора: getValue(true)

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

const selected = choices.getValue(true);

При true возвращается массив объектов выбора, где каждый элемент содержит метаданные:

  • value — значение
  • label — отображаемый текст
  • id — внутренний идентификатор
  • disabled — состояние доступности
  • дополнительные пользовательские поля (если они были добавлены)

Пример структуры:

[
  {
    value: "ru",
    label: "Русский",
    id: 1,
    selected: true,
    disabled: false
  }
]

Такой формат используется для:

  • сериализации состояния интерфейса
  • синхронизации с сервером
  • построения кастомных UI-компонентов

Получение только значений без объектов

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

const values = choices.getValue(false);

Возвращается упрощённая форма:

  • строка для одиночного выбора
  • массив строк для множественного выбора

Этот режим полезен для:

  • отправки данных формы
  • простого сравнения значений
  • интеграции с backend API

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

Choices.js хранит выбранные элементы не только как значения, но и как внутренние объекты состояния. Через getValue(true) можно работать с ними как с полноценными сущностями.

Это позволяет:

  • получать метаданные без дополнительного поиска
  • избегать повторного маппинга по value
  • работать с расширенными атрибутами

Пример использования:

const selectedItems = choices.getValue(true);

selectedItems.forEach(item => {
  console.log(item.value, item.label);
});

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

Для доступа к полному списку опций используется доступ к внутреннему набору choices.

В зависимости от версии API это может быть:

choices._store.choices

или публичный метод:

choices.getChoices();

Возвращаемая структура включает:

  • все доступные элементы
  • элементы с флагом disabled
  • элементы, добавленные динамически

Пример результата:

[
  { value: "ru", label: "Русский", disabled: false },
  { value: "en", label: "English", disabled: false }
]

Этот механизм используется для:

  • построения кастомных списков
  • фильтрации и анализа данных
  • синхронизации с внешними источниками

Различие между выбором и списком опций

Важно разделять:

  • selected items — выбранные пользователем элементы
  • choices list — полный список доступных вариантов

Методы получения информации работают в двух направлениях:

Задача Метод
Получить выбранные значения getValue()
Получить выбранные объекты getValue(true)
Получить список всех опций getChoices() или _store.choices

Получение данных в одиночном режиме

При singleSelect поведение упрощается:

const value = choices.getValue();

Возвращается:

  • строка (value выбранного элемента)
  • либо undefined, если выбор отсутствует

Объектная версия:

const item = choices.getValue(true);

Возвращает:

{
  value: "ru",
  label: "Русский",
  id: 1
}

Получение данных в множественном режиме

В режиме множественного выбора все методы возвращают массивы:

const values = choices.getValue(); // ["ru", "en"]
const objects = choices.getValue(true);

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

Синхронизация с DOM-значением

Несмотря на наличие внутреннего состояния, Choices.js синхронизирует его с оригинальным элементом формы.

Получение через DOM:

const raw = document.querySelector('select').value;

Однако это значение может быть менее информативным, чем getValue(), так как не включает дополнительные данные и не отражает внутреннюю структуру компонента.

Работа с динамически изменяемыми данными

Если элементы добавляются или удаляются во время выполнения, методы получения информации автоматически отражают изменения.

Пример сценария:

choices.setChoiceByValue('ru');
console.log(choices.getValue(true));

После динамического обновления списка:

choices.setChoices([
  { value: 'de', label: 'Deutsch' }
], 'value', 'label', true);

getValue() будет возвращать актуальное состояние без дополнительной синхронизации.

Получение состояния для сериализации

Часто требуется сохранить текущее состояние компонента:

const state = {
  value: choices.getValue(),
  full: choices.getValue(true)
};

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

  • сохранении черновиков форм
  • восстановлении интерфейса
  • клиентской сериализации состояния

Особенности работы с disabled элементами

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

  • getValue(true) возвращает их с флагом disabled
  • getValue() возвращает их значения без различий

Это важно при динамическом управлении доступностью опций.

Итоговая модель получения информации

Choices.js предоставляет три основных слоя доступа:

  • простые значения через getValue()
  • структурированные объекты через getValue(true)
  • полный список опций через getChoices()

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

Оглавление