Программная отправка

Библиотека Slim Select предоставляет программный API, позволяющий управлять выбранными значениями без участия пользователя. Это особенно важно в сценариях, где состояние формы формируется динамически: при загрузке данных с сервера, восстановлении черновиков, синхронизации нескольких полей или реактивном обновлении интерфейса.

Базовый принцип программной установки значений

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

Создание экземпляра:

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

После инициализации управление осуществляется через объект slim.

Установка одиночного значения

Для одиночных <select> используется метод set:

slim.set('value1')

Значение должно соответствовать атрибуту value у <option>.

<select id="mySelect">
  <option value="value1">Первый</option>
  <option value="value2">Второй</option>
</select>

Вызов slim.set('value2') приведёт к выбору второго элемента и синхронизации состояния компонента.

Установка множественных значений

Если <select multiple> включён, метод set принимает массив:

slim.set(['value1', 'value3'])

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

<select id="mySelect" multiple>
  <option value="value1">A</option>
  <option value="value2">B</option>
  <option value="value3">C</option>
</select>

Полная замена состояния

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

slim.set(['value2', 'value3'])

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

const current = slim.selected()
slim.set([...current, 'value1'])

Получение текущего состояния

Метод selected() возвращает актуальные значения:

const values = slim.selected()

Для одиночного селекта возвращается строка, для множественного — массив строк.

Очистка выбора

Очистка выполняется установкой пустого значения:

slim.set('')

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

slim.set([])

Альтернативно можно использовать null, однако поведение зависит от конфигурации и версии библиотеки.

Программное добавление опций перед установкой

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

slim.setData([
  { text: 'A', value: 'value1' },
  { text: 'B', value: 'value2' }
])

slim.set('value2')

Метод setData полностью заменяет список доступных опций.

Обновление после динамического изменения DOM

Если <select> изменяется вручную (например, через AJAX вставку <option>), Slim Select не всегда автоматически синхронизирует состояние. Для этого используется обновление:

slim.setDataFromSelect()

Метод перечитывает текущий DOM и перестраивает внутреннюю модель.

Программное изменение с сохранением выбранного значения

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

const selected = slim.selected()

slim.setData(newOptions)
slim.set(selected)

Такой подход предотвращает потерю состояния при перерисовке данных.

Установка значений с задержкой загрузки

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

fetch('/api/options')
  .then(res => res.json())
  .then(data => {
    slim.setData(data)
    slim.set(data[0].value)
  })

Значение устанавливается только после полной инициализации списка.

Программная установка при инициализации

Slim Select позволяет задавать начальное значение сразу после создания экземпляра, если DOM уже содержит соответствующие option:

const slim = new SlimSelect({
  select: '#mySelect',
  data: null
})

slim.set('value1')

Однако более надёжным считается установка через onAfterInit:

const slim = new SlimSelect({
  select: '#mySelect',
  onAfterInit: () => {
    slim.set('value1')
  }
})

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

При интеграции с реактивными системами (например, Redux-подобными хранилищами или фреймворками) Slim Select выступает как внешний UI-слой. В этом случае программная установка становится основным способом обновления:

store.subscribe(state => {
  slim.set(state.selectedValues)
})

Любое изменение состояния приложения приводит к обновлению UI без прямого взаимодействия пользователя.

Обработка некорректных значений

Если переданное значение не существует в списке опций, Slim Select игнорирует его. Это поведение важно при работе с ненадёжными источниками данных:

slim.set('unknown_value')

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

Массовое обновление состояния и данных

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

slim.setData(newOptions)
slim.set([])

или при необходимости:

slim.setData(newOptions)
slim.set(newOptions[0]?.value || '')

Особенности поведения при disabled состоянии

Если компонент находится в состоянии disabled, программная установка значений всё равно обновляет внутреннее состояние, но визуальное отображение может быть заблокировано:

slim.disable()
slim.set('value1')

После включения:

slim.enable()

значение становится видимым в интерфейсе.

Работа с асинхронной инициализацией

При поздней инициализации важно учитывать момент готовности экземпляра:

let slim

document.addEventListener('DOMContentLoaded', () => {
  slim = new SlimSelect({ select: '#mySelect' })

  slim.set('value1')
})

Попытка вызова set до создания экземпляра приводит к ошибкам или отсутствию эффекта.

Программная установка в циклических обновлениях

При частых обновлениях данных важно избегать избыточных вызовов set, так как это приводит к перерисовке UI:

if (slim.selected()[0] !== newValue) {
  slim.set(newValue)
}

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

Оглавление