Добавление и удаление значений

Механика управления выбранными значениями

В основе управления значениями в Slim Sel ect лежит синхронизация между DOM-элементом <select> и внутренним состоянием экземпляра библиотеки. Любое добавление или удаление значения отражается одновременно в визуальном компоненте и в исходном элементе формы, что позволяет сохранять совместимость с нативной отправкой форм.

Работа с выбранными значениями осуществляется через API-интерфейс экземпляра Slim Select, который предоставляет методы для установки, расширения и очистки текущего состояния выбора.

Установка значений через set

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

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

// установка одного значения
select.set('value1');

Для множественного выбора передаётся массив значений:

select.set(['value1', 'value2', 'value3']);

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

Добавление значений через set в режиме расширения

Slim Select не предоставляет отдельного метода «append» для выбранных значений, однако добавление реализуется через комбинирование текущего состояния с новым.

const current = select.getData().map(item => item.value);

select.set([...current, 'newValue']);

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

Добавление новых опций через add

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

select.add({
  text: 'Новая опция',
  value: 'new_option'
});

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

select.add([
  { text: 'Опция 1', value: 'opt1' },
  { text: 'Опция 2', value: 'opt2' }
]);

Добавление опций не изменяет текущее состояние выбранных значений, если явно не выполняется их выбор через set.

Удаление выбранных значений через set

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

select.set(['value1', 'value2', 'value3']);

// удаление одного значения
select.set(['value1', 'value3']);

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

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

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

select.set([]);

или

select.set('');

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

Удаление опций через remove

Удаление элементов из списка доступных опций осуществляется через метод remove, который принимает значение или объект опции.

select.remove('value1');

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

Удаление нескольких элементов:

select.remove(['value1', 'value2']);

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

Сценарии динамического управления данными

Загрузка данных и последующее обновление

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

fetch('/api/options')
  .then(res => res.json())
  .then(data => {
    select.setData(data);
  });

После обновления данных выбранные значения могут быть восстановлены отдельно через set.

Добавление пользовательских значений

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

select.add({
  text: 'Пользовательское значение',
  value: 'custom_value'
});

select.set([...select.getData().map(i => i.value), 'custom_value']);

Условное удаление

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

const allowed = ['value1', 'value3'];

const current = select.getData().map(i => i.value);
const filtered = current.filter(v => allowed.includes(v));

select.set(filtered);

Взаимодействие с состоянием DOM

Каждое изменение через API Slim Select автоматически синхронизируется с оригинальным <select>:

const element = document.querySelector('#example');

select.set('value1');

console.log(element.value);

В режиме multiple:

console.log(Array.fr om(element.selectedOptions).map(o => o.value));

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

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

В режиме multiple управление значениями требует учета массива:

  • повторное добавление одинаковых значений игнорируется
  • порядок значений может зависеть от последовательности установки
  • удаление происходит строго по совпадению значения
select.set(['a', 'b']);
select.set(['a', 'b', 'c']);
select.set(['a', 'c']);

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

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

select.set(select.getData().filter(i => i.selected).map(i => i.value));

Итоговая модель управления значениями

Логика работы с добавлением и удалением строится вокруг трёх операций:

  • полная установка состояния через set
  • расширение списка через добавление опций add
  • удаление элементов через remove

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

Оглавление