Валидация множественного выбора

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

Основной способ получения массива выбранных значений — обращение к методу экземпляра Slim Select:

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

const values = select.getSelected()

getSelected() возвращает массив строк, соответствующих value выбранных <option> элементов. Даже при одиночном выборе результат приводится к массиву для унификации интерфейса.

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

Внутреннее состояние Slim Select хранит выбранные элементы в структурированном виде. Помимо getSelected() в зависимости от версии библиотеки может использоваться обращение к свойству состояния:

const values = select.selected

или через метод:

const values = select.selected()

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

Работа с multiple select и формирование массива

При использовании multiple поведение становится ключевым: библиотека перестаёт оперировать одиночным значением и всегда возвращает массив.

HTML:

<select id="mySelect" multiple>
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="py">Python</option>
</select>

Jav * aScript:

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

const values = select.getSelected()

Результат:

["js", "ts"]

Даже если выбран только один элемент, структура останется массивом:

["js"]

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

Синхронизация с нативным DOM

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

const selectEl = document.querySelector('#mySelect')

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

Этот подход полезен в случаях, когда экземпляр Slim Select недоступен (например, после пересоздания компонента или при работе с серверным рендерингом).

Получение не только value, но и связанных данных

Часто требуется не только массив value, но и дополнительные данные (label, data-атрибуты). В таком случае используется метод получения полного набора выбранных элементов:

const data = select.getData()

И затем фильтрация:

const selected = data
  .filter(item => item.selected)
  .map(item => item.value)

или расширенный вариант:

const selectedItems = data.filter(item => item.selected)

Это позволяет работать с объектами выбора, а не только со строковыми идентификаторами.

Преобразование типов значений

По умолчанию Slim Select возвращает строки, даже если в HTML указаны числовые значения:

<option value="1">One</option>
<option value="2">Two</option>

Результат:

["1", "2"]

Для приведения к числам применяется явное преобразование:

const values = select.getSelected().map(Number)

или универсальный вариант:

const values = select.getSelected().map(value => {
  const num = Number(value)
  return Number.isNaN(num) ? value : num
})

Обновление массива после изменений выбора

Slim Select не требует ручного опроса состояния, так как поддерживает события изменения:

const select = new SlimSelect({
  select: '#mySelect',
  onChange: (info) => {
    const values = info.map(item => item.value)
  }
})

В некоторых версиях onChange сразу возвращает массив выбранных элементов, что позволяет отказаться от вызова getSelected() внутри обработчика.

Очистка и получение пустого массива

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

select.set([])
const values = select.getSelected()
// []

Также при программном сбросе через API:

select.setSelected([])

поведение остаётся идентичным — массив становится пустым, без null или undefined.

Частые ошибки при работе с массивом значений

Использование value вместо массива в multiple-режиме

const value = select.value // некорректно для multiple

В multiple-режиме это приводит к потере части данных или возврату только первого значения.

Предположение о типе данных

const values = select.getSelected()

values + 1 // ошибка логики

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

Игнорирование асинхронных изменений

При динамическом изменении опций:

select.setData(newData)

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

Использование массива в прикладной логике

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

  • отправки в API:
fetch('/api', {
  method: 'POST',
  body: JSON.stringify({ values: select.getSelected() })
})
  • фильтрации данных:
items.filter(item => select.getSelected().includes(item.id))
  • построения зависимых интерфейсов:
const selected = new Set(select.getSelected())

Использование Set часто предпочтительнее при частых проверках наличия элементов.

Особенности поведения при динамическом обновлении

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

  • удалённые опции исключаются из массива автоматически
  • добавленные опции не попадают в выбор без явного действия
  • порядок значений соответствует порядку выбора, а не порядку в DOM

Это важно учитывать при построении интерфейсов с динамическими фильтрами и зависимыми селектами.

Оглавление