Настройка одиночного select

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

Инициализация одиночного select выполняется на стандартном HTML <select> без атрибута multiple. Библиотека автоматически интерпретирует такой элемент как single select.

Базовая HTML-разметка

Структура исходного элемента формирует основу поведения компонента:

<select id="city-select">
  <option value="almaty">Алматы</option>
  <option value="astana">Астана</option>
  <option value="karaganda">Караганда</option>
</select>

Отсутствие атрибута multiple определяет одиночный режим. Значение value каждой опции становится ключевым идентификатором выбора.

Инициализация Slim Select

Подключение экземпляра Slim Select осуществляется через JavaScript-конструктор:

new SlimSelect({
  select: '#city-select'
});

После инициализации стандартный <select> заменяется кастомным интерфейсом с поддержкой поиска, стилизации и управляемого состояния.

Установка начального значения

Начальное выбранное значение определяется через атрибут selected в HTML:

<select id="city-select">
  <option value="almaty">Алматы</option>
  <option value="astana" selected>Астана</option>
  <option value="karaganda">Караганда</option>
</select>

При инициализации компонент автоматически синхронизирует внутреннее состояние с DOM.

Альтернативный способ — программное задание значения после инициализации:

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

select.setSelected('karaganda');

Метод setSelected принимает строковое значение value опции и изменяет активный выбор без необходимости взаимодействия с DOM напрямую.

Получение текущего значения

Текущее значение доступно через метод экземпляра:

const value = select.getSelected();

В одиночном режиме возвращается строка, соответствующая выбранному value. В отличие от мультиселекта, массив не формируется.

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

Динамическая модификация одиночного select часто применяется при загрузке данных с сервера или фильтрации зависимых списков.

Обновление выполняется через метод setData:

select.setData([
  { text: 'Алматы', value: 'almaty' },
  { text: 'Астана', value: 'astana' },
  { text: 'Караганда', value: 'karaganda' }
]);

Каждый объект содержит:

  • text — отображаемое значение
  • value — внутренний идентификатор

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

Управление placeholder

Placeholder в одиночном select задаётся через атрибут placeholder:

<select id="city-select" placeholder="Выбор города">
  <option value="almaty">Алматы</option>
  <option value="astana">Астана</option>
</select>

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

Дополнительно placeholder может быть задан через конфигурацию:

new SlimSelect({
  select: '#city-select',
  placeholder: 'Выбор города'
});

Очистка выбранного значения

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

select.setSelected('');

Также возможно использование null:

select.setSelected(null);

После очистки интерфейс возвращается к отображению placeholder.

Отключение и включение select

Управление доступностью элемента выполняется через методы disable и enable:

select.disable();
select.enable();

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

Поиск в одиночном select

Slim Select поддерживает встроенную фильтрацию даже в single mode. Поиск активируется автоматически при наличии достаточного количества опций.

Фильтрация выполняется по text:

<select id="city-select">
  <option value="almaty">Алматы</option>
  <option value="astana">Астана</option>
  <option value="karaganda">Караганда</option>
  <option value="shymkent">Шымкент</option>
</select>

При вводе текста список опций сокращается, при этом значение value не затрагивается до момента выбора.

Работа с событиями

Одиночный select генерирует событие изменения значения при каждом выборе:

new SlimSelect({
  select: '#city-select',
  events: {
    afterChange: (newValue) => {
      console.log(newValue);
    }
  }
});

В single mode newValue представляет собой строку. Событие вызывается только после завершения выбора, а не во время ввода текста.

Обновление значения извне

При внешнем изменении состояния DOM стандартный select может быть синхронизирован вручную:

document.querySelector('#city-select').value = 'astana';
select.sync();

Метод sync приводит внутреннее состояние Slim Select в соответствие с DOM-элементом.

Блокировка выбора отдельных опций

Отключение конкретных значений выполняется через параметр disabled в данных:

select.setData([
  { text: 'Алматы', value: 'almaty' },
  { text: 'Астана', value: 'astana', disabled: true },
  { text: 'Караганда', value: 'karaganda' }
]);

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

Сброс состояния к начальному значению

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

const initial = select.getSelected();

select.setSelected('');
select.setSelected(initial);

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

Особенности поведения в single mode

Одиночный режим Slim Select отличается рядом внутренних характеристик:

  • состояние всегда строковое
  • отсутствует накопление значений
  • визуальный компонент не отображает “тегов”
  • изменение выбора всегда заменяет предыдущее значение
  • API не возвращает массивов даже при единичных значениях

Такое поведение обеспечивает предсказуемость при интеграции с формами, API-запросами и реактивными интерфейсами.

Использование в формах

При отправке формы значение одиночного select передаётся как стандартное поле формы:

<form>
  <select id="city-select" name="city">
    <option value="almaty">Алматы</option>
    <option value="astana">Астана</option>
  </select>

  <button type="submit">Отправить</button>
</form>

После инициализации Slim Select не влияет на механизм отправки формы, а только расширяет интерфейс взаимодействия.

Оглавление