Метод getSelected

Метод getSelected в библиотеке Slim Select предназначен для получения текущего набора выбранных значений из экземпляра компонента. Он используется для синхронизации состояния UI с логикой приложения и извлечения данных без обращения к DOM напрямую.

Назначение и особенности

Метод ориентирован на работу с уже инициализированным экземпляром Slim Select и выполняет чтение внутреннего состояния выбора.

Ключевые характеристики:

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

Сигнатура метода

instance.getSelected();

Метод вызывается на экземпляре Slim Select, созданном через new SlimSelect({...}).

Формат возвращаемого значения

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

При multiple: true возвращается массив строковых значений:

["value1", "value2", "value3"]

Каждый элемент массива соответствует value выбранного <option>.

Одиночный выбор

При multiple: false возвращается строка:

"value1"

Если выбор отсутствует, результатом становится пустая строка:

""

Поведение метода

Метод обращается к внутреннему состоянию Slim Select, которое обновляется при:

  • выборе элемента пользователем;
  • программном изменении через API (setSelected, setData);
  • очистке выбора;
  • инициализации компонента.

Состояние всегда синхронизировано с визуальным интерфейсом.

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

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

const selected = select.getSelected();
console.log(selected);

Использование в режиме множественного выбора

const select = new SlimSelect({
  select: '#myMultiSelect',
  settings: {
    multiple: true
  }
});

const values = select.getSelected();

values.forEach(value => {
  console.log(value);
});

Сценарии применения

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

Метод используется для извлечения значений без обращения к DOM:

const formData = {
  tags: tagSelect.getSelected(),
  categories: categorySelect.getSelected()
};

Синхронизация с состоянием приложения

function syncState() {
  state.selectedItems = select.getSelected();
}

Отправка данных на сервер

const payload = {
  items: select.getSelected()
};

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

Поведение при отсутствии выбора

Одиночный режим

""

Множественный режим

[]

Пустое состояние всегда приводит к предсказуемому результату, что упрощает проверку:

const selected = select.getSelected();

if (selected.length === 0) {
  // отсутствие выбора
}

Отличие от получения значений через DOM

Обычный подход через <select>:

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

Ограничения такого подхода:

  • не поддерживает сложные состояния Slim Select;
  • не учитывает внутренние оптимизации;
  • не отражает кастомные изменения через API библиотеки.

getSelected решает эти ограничения, работая с актуальной моделью данных компонента.

Взаимодействие с другими методами

setSelected

После вызова setSelected метод getSelected сразу возвращает обновлённое значение:

select.setSelected(['a', 'b']);

const values = select.getSelected();
// ['a', 'b']

setData

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

select.setData([{ text: 'A', value: 'a' }]);

select.getSelected(); // []

Типичные ошибки использования

Предположение о типе возвращаемого значения

В режиме одиночного выбора часто ожидается массив, хотя возвращается строка:

const value = select.getSelected();

// некорректно для single mode:
value.forEach(...)

Отсутствие проверки пустого состояния

const selected = select.getSelected();

selected.includes('value'); // ошибка, если selected === ""

Корректный подход требует нормализации:

const selected = select.getSelected();
const normalized = Array.isArray(selected) ? selected : [selected].filter(Boolean);

Производительность

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

  • при фильтрации;
  • при реактивных обновлениях интерфейса;
  • при обработке событий формы.

Поведение при асинхронных обновлениях

При изменении данных через API или события Slim Select состояние обновляется синхронно, поэтому:

select.setSelected(['x']);
console.log(select.getSelected());

всегда возвращает актуальное значение без задержек.

Интеграция в архитектуру приложения

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

  • Flux / Redux-подобные модели;
  • реактивные UI-системы;
  • модульные формы;
  • сервисные слои, отделяющие UI от бизнес-логики.

Итоговая модель поведения

  • источник данных: внутреннее состояние Slim Select;
  • тип результата: string или string[];
  • зависимость от DOM: отсутствует;
  • реакция на изменения: мгновенная;
  • назначение: чтение текущего выбора без побочных эффектов.
Оглавление