Получение выбранного значения

В библиотеке Slim Sel ect выбранные данные представляют собой состояние, которое синхронизируется между DOM-элементом <select> и внутренним экземпляром инициализированного компонента. Работа с этим состоянием может осуществляться через несколько механизмов: прямое чтение значения из элемента, использование методов экземпляра Slim Select, а также обработка событий изменения выбора.

Базовый принцип хранения выбранных значений

После инициализации Slim Select исходный <select> не теряет своей роли источника истины. Компонент лишь расширяет его функциональность и обновляет значение при взаимодействии с интерфейсом.

Для одиночного выбора значение хранится как строка:

<select id="city">
  <option value="astana">Астана</option>
  <option value="karaganda">Караганда</option>
  <option value="almaty">Алматы</option>
</select>

В случае одиночного выбора результатом будет одно значение, соответствующее выбранному option.

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

Получение значения через DOM-элемент

Самый прямой способ — обращение к свойству value у <select>:

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

const value = select.value;

Такой подход корректен только для одиночного выбора. При использовании multiple значение будет возвращено неконсистентно, так как DOM в этом случае не отражает полный набор выбранных опций.

Для множественного выбора используется selectedOptions:

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

const values = Array.fr om(select.selectedOptions).map(option => option.value);

Данный способ не зависит от Slim Select и работает на уровне нативного API браузера.

Получение значений через экземпляр Slim Select

После инициализации компонента создаётся экземпляр, через который доступно управление состоянием выбора.

const slim = new SlimSelect({
  select: '#city'
});

Метод получения выбранных значений

В большинстве реализаций Slim Select используется метод получения текущего выбора:

const selected = slim.getSelected();

Результат зависит от режима:

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

В некоторых версиях API используется свойство или метод selected():

const selected = slim.selected();

Оба варианта представляют логически одинаковую операцию: извлечение текущего состояния выбора из внутреннего хранилища компонента.

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

Slim Select оперирует не только значениями value, но и объектами опций, содержащими дополнительные поля:

  • текст отображения
  • значение
  • дополнительные пользовательские данные (если были добавлены при инициализации)

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

const selectedData = slim.getSelected();

В зависимости от конфигурации и версии библиотеки результат может содержать:

[
  {
    text: "Караганда",
    value: "karaganda"
  }
]

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

Обработка события изменения выбора

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

Slim Select предоставляет механизм уведомления при каждом изменении:

const slim = new SlimSelect({
  select: '#city',
  events: {
    afterChange: (newVal) => {
      console.log(newVal);
    }
  }
});

В момент вызова afterChange передаётся актуальное состояние выбора.

Для одиночного селекта:

"karaganda"

Для множественного:

["karaganda", "almaty"]

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

Особенности получения значения в режиме multiple

При включённом multiple: true поведение методов получения значения меняется.

const slim = new SlimSelect({
  select: '#city',
  settings: {
    placeholderText: 'Выбор города'
  }
});

В этом режиме:

  • DOM value отражает только первый выбранный элемент
  • selectedOptions даёт полный список
  • методы Slim Select возвращают массив значений

Корректным считается использование API компонента:

const values = slim.getSelected();

Синхронизация состояния при программных изменениях

При изменении выбора через код состояние обновляется синхронно:

slim.setSelected('almaty');

После этого получение значения через любой механизм возвращает обновлённый результат:

slim.getSelected(); // "almaty"

Для множественного выбора:

slim.setSelected(['almaty', 'karaganda']);
slim.getSelected(); // ["almaty", "karaganda"]

Внутреннее состояние и приоритет источников данных

При работе Slim Select можно выделить три уровня получения выбранных значений:

  1. DOM-уровень — select.value и selectedOptions
  2. API-уровень Slim Select — getSelected, selected
  3. Событийный уровень — afterChange, change

Приоритетным считается API-уровень, так как он синхронизирован с внутренним состоянием компонента, тогда как DOM может не отражать промежуточные изменения в процессе анимаций или кастомного рендера.

Типичные сценарии извлечения значения

При интеграции в формы значение обычно извлекается в момент отправки:

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const selectedCity = slim.getSelected();
});

При динамических интерфейсах значение используется для фильтрации:

slim.events = {
  afterChange: (value) => {
    filterData(value);
  }
};

При инициализации из внешних данных используется синхронизация состояния:

slim.setSelected(initialValue);
const current = slim.getSelected();

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

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

  • string — одиночный выбор без массива
  • string[] — множественный выбор
  • object[] — расширенные данные опций
  • null или [] — отсутствие выбора

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

Обработка пустого значения

При отсутствии выбранных элементов возвращаемое значение может принимать следующие формы:

slim.getSelected(); // []

или

slim.getSelected(); // null

Рекомендуется учитывать оба варианта при проверках:

const value = slim.getSelected();

if (!value || value.length === 0) {
  // нет выбранных элементов
}

Итоговая модель получения данных

Slim Select предоставляет многослойную модель доступа к выбранным значениям, где DOM, API и события работают совместно. На практике наибольшую предсказуемость обеспечивает использование методов экземпляра, синхронизированных с внутренним состоянием компонента, тогда как DOM-методы используются преимущественно для базовых сценариев и совместимости с нативными формами.

Оглавление