Инициализация multiple select

Базовая разметка HTML для множественного выбора

Множественный выбор в Slim Select опирается на стандартный HTML-элемент <select> с атрибутом multiple. Именно этот атрибут определяет режим работы компонента и позволяет выбирать несколько значений одновременно.

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

Ключевой момент заключается в том, что Slim Select не требует отдельной конфигурации для активации multiple-режима — он автоматически определяется на основе DOM-элемента.

Базовая инициализация Slim Select для multiple select

Инициализация выполняется через конструктор SlimSelect, которому передаётся селектор исходного <select>.

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

При наличии атрибута multiple библиотека автоматически переключается в режим множественного выбора, добавляя соответствующий UI: теги выбранных элементов, возможность удаления каждого элемента и мультиселект-логика управления состоянием.

Поведение multiple select по умолчанию

После инициализации формируется следующий набор стандартных возможностей:

  • отображение выбранных значений в виде отдельных элементов (chips)
  • возможность удаления каждого выбранного элемента
  • добавление новых значений без закрытия списка (зависит от настроек)
  • сохранение массива выбранных значений в <select>.value

Внутренне значение элемента становится массивом строк, соответствующих value выбранных <option>.

Настройки, влияющие на multiple select

Slim Select предоставляет набор конфигураций, которые особенно важны при работе с множественным выбором.

placeholderText

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

new SlimSelect({
  select: '#languages',
  settings: {
    placeholderText: 'Выберите языки'
  }
});

closeOnSelect

Определяет, закрывается ли выпадающий список после выбора элемента. Для multiple-select часто используется значение false, чтобы ускорить выбор нескольких опций.

new SlimSelect({
  select: '#languages',
  settings: {
    closeOnSelect: false
  }
});

showSearch

Включает или отключает поле поиска внутри списка опций. При большом количестве элементов эта настройка критична.

new SlimSelect({
  select: '#languages',
  settings: {
    showSearch: true
  }
});

allowDeselect

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

new SlimSelect({
  select: '#languages',
  settings: {
    allowDeselect: true
  }
});

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

Slim Select позволяет задавать выбранные значения после инициализации через метод setSelected.

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

select.setSelected(['js', 'py']);

Передаваемый массив должен содержать значения value соответствующих <option>.

Получение выбранных значений

Для получения текущего состояния используется свойство value DOM-элемента <select>.

const element = document.querySelector('#languages');
console.log(element.value);

В режиме multiple возвращается массив выбранных значений:

["js", "py"]

Динамическая инициализация multiple select

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

const select = document.createElement('select');
select.id = 'frameworks';
select.multiple = true;

document.body.appendChild(select);

new SlimSelect({
  select: '#frameworks'
});

Инициализация с предзаданными значениями

При стандартной HTML-разметке можно заранее указать выбранные элементы через selected.

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

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

new SlimSelect({
  select: '#languages'
});

Работа с большим количеством опций

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

Рекомендуемые настройки:

new SlimSelect({
  select: '#languages',
  settings: {
    showSearch: true,
    closeOnSelect: false,
    placeholderText: 'Поиск и выбор языков'
  }
});

Поиск внутри списка снижает нагрузку на визуальное восприятие и ускоряет выбор.

Обновление списка опций в multiple select

Slim Select поддерживает полное обновление данных через метод setData. Это особенно полезно при динамической загрузке списка.

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

select.setData([
  { text: 'JavaScript', value: 'js' },
  { text: 'TypeScript', value: 'ts' },
  { text: 'Python', value: 'py' }
]);

После обновления данные отображаются как новые опции, при этом multiple-логика сохраняется.

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

Для сброса множественного выбора используется метод setSelected с пустым массивом.

select.setSelected([]);

Это приводит к очистке всех выбранных элементов и возврату к начальному состоянию.

Особенности внутреннего состояния multiple select

При работе в multiple-режиме Slim Select управляет состоянием через синхронизацию:

  • DOM <select multiple> — источник истины
  • внутренний state Slim Select — отражение UI
  • массив значений — результат выбора пользователя

Любое программное изменение через API синхронизирует все три уровня.

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

Каждый выбранный элемент в multiple-режиме отображается как отдельный UI-компонент с возможностью удаления. Удаление приводит к:

  • удалению соответствующего <option> из состояния выбора
  • обновлению массива значений
  • пересборке UI списка выбранных элементов

Типичные ошибки при инициализации multiple select

Часто встречающиеся проблемы:

  • отсутствие атрибута multiple в <select>
  • попытка передать одиночное значение вместо массива в setSelected
  • инициализация до появления элемента в DOM
  • конфликт повторной инициализации без уничтожения предыдущего экземпляра Slim Select

Корректная работа требует соблюдения синхронизации DOM и состояния библиотеки.

Повторная инициализация multiple select

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

let select = new SlimSelect({
  select: '#languages'
});

// при необходимости пересоздания логики
select.destroy();

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

Такой подход предотвращает утечки состояния и дублирование UI.

Оглавление