Полный список методов

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

open()

Метод открытия выпадающего списка.

Сигнатура:

select.open()

Описание: Принудительно раскрывает dropdown, имитируя пользовательский клик по селекту. Используется в сценариях, где требуется программный фокус на выборе значения.

Пример:

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

select.open()

close()

Метод закрытия выпадающего списка.

Сигнатура:

select.close()

Описание: Закрывает список, если он открыт. Не влияет на выбранные значения и состояние компонента.

Пример:

select.close()

set(value)

Установка выбранного значения или значений.

Сигнатура:

select.set(value)

Описание: Позволяет программно изменить текущее выбранное значение. Поддерживает одиночные и множественные значения (в зависимости от конфигурации select).

Параметры:

  • value — строка, число или массив значений

Пример (single):

select.set('apple')

Пример (multiple):

select.set(['apple', 'banana'])

getSelected()

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

Сигнатура:

select.getSelected()

Описание: Возвращает текущее выбранное значение или массив значений при множественном выборе.

Возвращаемое значение:

  • string | number | array

Пример:

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

setData(data)

Полная замена набора опций.

Сигнатура:

select.setData(data)

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

Формат данных:

[
  { text: 'Apple', value: 'apple' },
  { text: 'Banana', value: 'banana' }
]

Пример:

select.setData([
  { text: 'Red', value: 'red' },
  { text: 'Green', value: 'green' }
])

add()

Добавление новой опции в список.

Сигнатура:

select.add(data)

Описание: Добавляет одну или несколько новых опций без полной перезагрузки списка.

Параметры:

  • data — объект или массив объектов

Пример:

select.add({
  text: 'Orange',
  value: 'orange'
})

Пример (несколько значений):

select.add([
  { text: 'Black', value: 'black' },
  { text: 'White', value: 'white' }
])

remove()

Удаление опции из списка.

Сигнатура:

select.remove(value)

Описание: Удаляет опцию по значению. Если значение используется в выбранных элементах, оно также будет удалено из selection.

Параметры:

  • value — значение опции

Пример:

select.remove('banana')

enable()

Активация компонента.

Сигнатура:

select.enable()

Описание: Снимает состояние disabled, позволяя взаимодействовать с селектом.

Пример:

select.enable()

disable()

Отключение компонента.

Сигнатура:

select.disable()

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

Пример:

select.disable()

destroy()

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

Сигнатура:

select.destroy()

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

Особенности:

  • компонент перестаёт реагировать на любые вызовы методов
  • DOM-структура Slim Select удаляется

Пример:

select.destroy()

getData()

Получение полного списка опций.

Сигнатура:

select.getData()

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

Возвращаемое значение:

[
  { text: string, value: string }
]

Пример:

const data = select.getData()
console.log(data)

setSelected()

Установка выбранных значений с более явным контролем состояния.

Сигнатура:

select.setSelected(value)

Описание: Аналог set(), но используется в сценариях, где требуется явное обновление selection без пересчёта дополнительных состояний интерфейса.

Пример:

select.setSelected('apple')

Поиск по опциям.

Сигнатура:

select.search(query)

Описание: Фильтрует список опций по строке запроса. Используется для программного управления поиском внутри компонента.

Параметры:

  • query — строка поиска

Пример:

select.search('app')

setValue() (устаревшее поведение в некоторых версиях)

В ряде реализаций встречается альтернативный метод установки значения.

Сигнатура:

select.setValue(value)

Описание: Функционально дублирует set(), однако в новых версиях Slim Select предпочтение отдано set() как унифицированному API.

refresh()

Обновление состояния компонента без полной пересборки.

Сигнатура:

select.refresh()

Описание: Принудительно синхронизирует внутреннее состояние Slim Select с текущим DOM <select>. Используется при внешнем изменении <option> без вызова API библиотеки.

Пример:

document.querySelector('#mySelect').append(new Option('New', 'new'))
select.refresh()

blur()

Снятие фокуса с компонента.

Сигнатура:

select.blur()

Описание: Принудительно убирает фокус, закрывая интерактивное состояние, если оно активно.

focus()

Установка фокуса на компонент.

Сигнатура:

select.focus()

Описание: Переводит фокус на Slim Select, аналогично фокусу на обычном HTML <select>.

state API (enable/disable логика через состояние)

Внутренняя модель состояния Slim Select опирается на флаги активности, которые управляются методами enable() и disable(). Эти методы изменяют:

  • возможность открытия dropdown
  • обработку событий клавиатуры
  • визуальное состояние компонента

Поведение методов при множественном выборе

При включённом multiple: true методы, работающие со значениями (set, setSelected, getSelected) возвращают и принимают массивы.

select.set(['a', 'b', 'c'])
const values = select.getSelected()

Взаимодействие методов между собой

Методы Slim Select не изолированы — изменение состояния через один метод влияет на другие:

  • set() автоматически обновляет getSelected()
  • add() влияет на getData()
  • remove() изменяет и данные, и выбранные значения
  • setData() полностью пересобирает состояние списка
  • destroy() блокирует вызов всех остальных методов

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

Оглавление