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

Работа с множественным выбором в интерфейсных компонентах часто требует полного сброса состояния. В Slim Select, как в обёртке над стандартным <select>, управление выбранными значениями строится вокруг программного API экземпляра, синхронизирующего DOM и внутреннее состояние компонента.

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

Базовая модель состояния Slim Select

Slim Sel ect опирается на исходный элемент <select>:

  • значение value или массив selectedOptions
  • наличие атрибута multiple
  • список <option> с флагом selected

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

Очистка через метод set

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

Очистка множественного выбора

Для <select multiple> применяется установка пустого массива:

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

slim.set([]);

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

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

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

Для обычного <select> (без multiple) используется установка пустого значения:

slim.set('');

или, в некоторых реализациях:

slim.set(null);

Результат аналогичен:

  • текущее значение сбрасывается
  • выбранный элемент становится пустым
  • placeholder (если задан) отображается повторно

Сброс через DOM-элемент

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

const select = document.querySelector('#example');
select.selectedIndex = -1;
select.value = '';

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

Array.fr om(sel ect.options).forEach(option => {
  option.selected = false;
});

После этого Slim Select может потребовать ручного обновления состояния через повторную синхронизацию или пересоздание инстанса, в зависимости от версии.

Обновление после очистки

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

slim.set([]);

Даже если состояние уже очищено на уровне DOM, вызов метода гарантирует корректное обновление UI-компонента.

Очистка с учётом асинхронных данных

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

slim.set([]);

// повторная загрузка данных
fetch('/api/options')
  .then(res => res.json())
  .then(data => {
    slim.setData(data);
  });

В подобных сценариях важно разделять:

  • очистку выбранных значений
  • обновление списка доступных опций

Сброс при повторной инициализации

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

slim.set([]);
slim.destroy();

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

Такой подход предотвращает «залипание» старых выбранных значений при повторной инициализации.

Очистка с сохранением опций

Существует сценарий, когда требуется сбросить только выбор, не затрагивая список доступных значений. В этом случае используется только изменение состояния, без модификации <option>:

slim.set([]);

Опции остаются в DOM неизменными, изменяется только активное состояние.

Поведение placeholder при очистке

Если в конфигурации задан placeholder, он автоматически восстанавливается после очистки:

new SlimSelect({
  select: '#example',
  placeholder: 'Выберите значение'
});

После выполнения:

slim.set([]);

компонент возвращается в исходное состояние, отображая placeholder как активное значение интерфейса.

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

Slim Select генерирует события при изменении состояния. Очистка через API также вызывает соответствующие события изменения:

slim.set([]);

Это может приводить к вызову обработчиков onChange, если они были определены при инициализации:

new SlimSelect({
  select: '#example',
  onChange: (info) => {
    console.log(info);
  }
});

При очистке info обычно становится пустым массивом или null, в зависимости от режима выбора.

Полный программный сброс состояния

Комбинированный вариант очистки включает:

  • сброс значения через API
  • синхронизацию DOM (при необходимости)
  • контроль placeholder
  • обновление зависимых компонентов интерфейса
function clearSlimSelect(instance) {
  instance.set([]);
  
  const select = instance.select;
  if (select && select.options) {
    Array.fr om(select.options).forEach(opt => {
      opt.selected = false;
    });
  }
}

Такой подход применяется в сложных интерфейсах, где Slim Select является частью формы с зависимыми полями.

Особенности поведения при разных конфигурациях

При использовании различных режимов Slim Select поведение очистки может отличаться:

  • multiple: очищается массив выбранных значений
  • single: устанавливается пустое значение
  • ajax-режим: сохраняются опции, но сбрасывается выбор
  • disabled options: остаются неизменными после очистки

Типичные ошибки при очистке состояния

Часто встречаются следующие некорректные подходы:

  • попытка очистки через удаление <select>.innerHTML
  • прямое изменение DOM без синхронизации с API
  • повторная инициализация без вызова destroy
  • установка undefined вместо [] или null

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

Оглавление