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

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

Состояние выбора формируется на основе структуры Choice и Item. Каждый выбранный элемент существует одновременно в двух формах: как визуальный элемент интерфейса и как часть внутреннего массива selectedItems.

Метод getValue

Основной способ получения выбранных значений — метод getValue() экземпляра Choices.

const choices = new Choices('#select');
const value = choices.getValue();

Поведение метода зависит от режима работы компонента:

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

Дополнительный параметр позволяет управлять уровнем детализации:

choices.getValue(true);
choices.getValue(false);

Форматы возвращаемых данных

Метод getValue() поддерживает два ключевых режима возврата данных:

1. Упрощённый формат (true) Возвращается массив или значение, содержащие только value выбранных элементов.

choices.getValue(true);
// ['apple', 'banana']

Для одиночного выбора:

choices.getValue(true);
// 'apple'

2. Полный формат (false) Возвращается массив объектов выбора, содержащих всю информацию об элементе:

choices.getValue(false);

Пример структуры объекта:

[
  {
    value: 'apple',
    label: 'Apple',
    id: 1,
    selected: true,
    disabled: false
  }
]

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

Множественный выбор

В режиме removeItem или при включённом maxItemCount > 1 библиотека работает с массивом значений.

const choices = new Choices('#select', {
  removeItemButton: true,
  maxItemCount: 5
});

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

choices.getValue(true);

Результат всегда нормализуется в массив:

['red', 'green', 'blue']

При использовании полного формата:

choices.getValue(false);

возвращается массив объектов, соответствующих каждому выбранному элементу.

Работа с объектами выбранных элементов

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

choices._store.state.items
choices._store.state.choices

Хотя прямой доступ к внутреннему store считается вспомогательным, он позволяет получить актуальное состояние без преобразования через API-методы.

Каждый элемент в selectedItems содержит расширенную структуру:

{
  id: 3,
  highlighted: false,
  active: true,
  choiceId: 3,
  groupId: 0,
  value: 'banana',
  label: 'Banana'
}

Получение через selectedItems

Некоторые версии и конфигурации библиотеки позволяют использовать:

choices.selectedItems

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

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

const selected = choices.selectedItems.map(item => item.value);

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

Скрытое поле input

Choices.js всегда синхронизирует выбранные значения с исходным <input> или <select> элементом.

Для <input> значения записываются как строка:

<input type="text" value="apple,banana,orange">

Для <select multiple> формируется набор option:selected, но фактическое значение можно получить стандартным DOM-способом:

document.querySelector('#select').value;

Однако этот способ не всегда отражает полное состояние в сложных конфигурациях, особенно при кастомных рендерерах и удалённых источниках данных.

Синхронизация состояния

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

  • обновление внутреннего массива items
  • пересчёт selectedItems
  • синхронизация с DOM-элементом
  • обновление value скрытого input
  • генерация события change

Пример обработки события:

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

element.addEventListener('change', () => {
  const values = choices.getValue(true);
});

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

Практика получения значений в разных сценариях

Сценарий синхронизации с API

const selectedValues = choices.getValue(true);

fetch('/api/save', {
  method: 'POST',
  body: JSON.stringify(selectedValues)
});

Сценарий отображения пользовательского списка

const selectedItems = choices.getValue(false);

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

Сценарий реактивной обработки

document.querySelector('#select')
  .addEventListener('change', () => {
    const current = choices.getValue(true);
    updateState(current);
  });

Сценарий работы с ограничением выбора

const choices = new Choices('#select', {
  maxItemCount: 3
});

const values = choices.getValue(true);
// всегда массив длиной <= 3

Различие между getValue и внутренним состоянием

getValue() — публичный API, возвращающий нормализованное состояние.

Внутренние структуры (_store, state, selectedItems) могут содержать дополнительные служебные поля, используемые для:

  • управления UI
  • оптимизации рендера
  • хранения групп
  • обработки поиска

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

Оглавление