Программная установка значения

В Slim Select управление выбранным значением не ограничивается взаимодействием пользователя с интерфейсом. Любое состояние селекта может быть изменено программно после инициализации, включая одиночный и множественный выбор, сброс значения, а также синхронизацию с внешними данными. Основной механизм изменения значения основан на методе set, который принимает значение или массив значений в зависимости от конфигурации компонента.

Базовая установка значения после инициализации

После создания экземпляра Slim Select объект сохраняется в переменную, через которую и осуществляется дальнейшее управление состоянием.

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

Изменение выбранного значения выполняется вызовом метода set:

select.set('value1');

В случае обычного <select> (single select) передаётся строка, соответствующая значению value у option-элемента. Slim Select находит соответствующий элемент и устанавливает его как выбранный, одновременно обновляя UI и внутреннее состояние.

Работа с множественным выбором

При включённом режиме multiple структура значения меняется. Метод set начинает принимать массив значений, каждое из которых соответствует отдельной опции.

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

select.set(['value1', 'value3', 'value5']);

Каждый элемент массива обрабатывается независимо. Если часть значений отсутствует в списке опций, они игнорируются, не вызывая ошибки, что позволяет безопасно передавать данные из внешних источников без предварительной валидации на уровне UI-компонента.

Перезапись текущего состояния

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

select.set('value2');

Даже если до этого были выбраны другие элементы (в multi-select), они будут удалены из состояния, если не включены в новый набор значений.

Такой подход упрощает синхронизацию с серверными данными, где состояние селекта рассматривается как производное от внешнего источника истины.

Сброс значения

Сброс выбора осуществляется передачей пустого значения. В одиночном режиме используется пустая строка или null (в зависимости от реализации), в множественном — пустой массив.

select.set('');

или

select.set([]);

После выполнения сброса Slim Select возвращается к состоянию без выбранных элементов, а placeholder, если он задан, становится активным визуальным элементом интерфейса.

Установка значения до загрузки данных

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

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

fetch('/api/options')
  .then(res => res.json())
  .then(data => {
    select.setData(data);

    select.set('value2');
  });

Метод setData обновляет список опций, после чего set может корректно сопоставить переданное значение с существующими элементами.

Установка значения через объекты данных

Slim Select работает не только с DOM-значениями, но и с объектной структурой данных. В этом случае значение сопоставляется через поле value, а отображение через text.

select.set([
  { text: 'Option A', value: 'a' },
  { text: 'Option B', value: 'b' }
]);

Такой подход используется при динамическом формировании данных на клиенте без необходимости рендеринга <option> в HTML. Компонент самостоятельно нормализует входные данные и синхронизирует их с внутренним состоянием.

Поведение при несовпадении значений

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

select.set(['not-exist', 'value1']);

В этом случае будет выбрано только value1, если оно присутствует в списке.

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

Обновление значения без изменения списка опций

Slim Select допускает изменение выбранного состояния без модификации списка доступных опций. Это полезно при статическом наборе <option> в HTML.

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

select.set('value3');

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

Синхронизация с внешним состоянием

Программная установка значения часто используется для синхронизации с состоянием приложения. Например, при загрузке профиля пользователя:

function loadUser(userId) {
  fetch(`/api/user/${userId}`)
    .then(res => res.json())
    .then(user => {
      select.set(user.role);
    });
}

В таких сценариях Slim Select выступает как визуальный слой над бизнес-данными, а не как источник состояния.

Поведение событий при установке значения

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

select.on('change', (info) => {
  console.log(info);
});

select.set('value1');

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

Установка значения в динамически обновляемых списках

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

select.setData(newOptions);
select.set('value10');

Если выполнить наоборот, выбранное значение может быть сброшено после обновления списка.

Особенности работы с placeholder

При сбросе значения или отсутствии совпадений Slim Select возвращает компонент в состояние отображения placeholder. Это поведение сохраняется даже при программной установке значения, если переданное значение пустое или невалидное.

select.set('');

Визуально это эквивалентно состоянию “ничего не выбрано”, однако внутренне компонент остаётся инициализированным и готовым к следующему изменению состояния.