Обязательные поля

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

Каждый элемент списка в Slim Select описывается объектом с фиксированными полями. На уровне JavaScript-инициализации это выглядит как массив объектов, где каждый объект представляет одну опцию.

Минимально необходимая структура:

  • text — отображаемый текст
  • value — значение, которое будет отправляться в форму или использоваться в логике приложения
new SlimSelect({
  select: '#select',
  data: [
    { text: 'HTML', value: 'html' },
    { text: 'CSS', value: 'css' },
    { text: 'JavaScript', value: 'js' }
  ]
});

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

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

Обязательные поля при работе с HTML <select>

При использовании Slim Select поверх стандартного элемента <select> обязательные поля задаются через HTML-атрибуты:

  • value у <option>
  • текстовое содержимое <option>
<select id="select">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

В этом случае Slim Select извлекает данные напрямую из DOM. Отсутствие value приводит к тому, что браузер может подставить текстовое значение как fallback, однако это нарушает предсказуемость поведения и может привести к рассинхронизации состояния.

Идентификация выбранного состояния

Обязательное поле value используется для хранения текущего выбора. Slim Select опирается на него при:

  • установке значения через API
  • синхронизации с формой
  • восстановлении состояния после рендера
let select = new SlimSelect({
  select: '#select'
});

select.set('css');

Вызов set работает исключительно через сопоставление со значением value. Если поле отсутствует или не уникально, механизм поиска выбранной опции нарушается.

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

Ключевым требованием к обязательным полям является уникальность value в пределах одного списка. Slim Select не накладывает строгую валидацию, но логика компонента предполагает:

  • одно значение = одна опция
  • отсутствие дубликатов

Пример корректной структуры:

data: [
  { text: 'Node.js', value: 'node' },
  { text: 'Deno', value: 'deno' }
]

Некорректная структура:

data: [
  { text: 'Node.js', value: 'runtime' },
  { text: 'Deno', value: 'runtime' }
]

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

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

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

  • text
  • value
fetch('/api/languages')
  .then(res => res.json())
  .then(data => {
    new SlimSelect({
      select: '#select',
      data: data.map(item => ({
        text: item.name,
        value: item.id
      }))
    });
  });

Любая дополнительная информация (например, icon, disabled, data-*) не заменяет обязательные поля, а лишь расширяет модель.

Роль обязательных полей в внутренней модели Slim Select

Внутренне Slim Select преобразует входные данные в нормализованную структуру:

  • отображаемое значение хранится отдельно
  • логическое значение выбора хранится отдельно
  • состояние синхронизируется через value

Это позволяет:

  • быстро искать выбранный элемент
  • обновлять DOM без полного пересоздания списка
  • обеспечивать стабильность при изменении данных

Без value невозможна корректная нормализация, так как отсутствует ключ сопоставления.

Обязательные поля и состояние disabled

Хотя disabled не является обязательным, он часто используется вместе с базовыми полями и влияет на доступность опции:

{ text: 'Deprecated API', value: 'old', disabled: true }

Однако даже в этом случае обязательная пара остаётся неизменной: text + value.

Поведение при частично заданных данных

Slim Select допускает частично некорректные данные, но это приводит к деградации функциональности:

  • отсутствует text → элемент не отображается
  • отсутствует value → невозможно выбрать элемент корректно
  • отсутствуют оба поля → опция игнорируется

Пример проблемной структуры:

data: [
  { text: 'React' },        // нет value
  { value: 'vue' }          // нет text
]

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

Связь обязательных полей с формами

При интеграции Slim Select в HTML-формы именно value становится отправляемым значением:

<form>
  <select id="framework">
    <option value="react">React</option>
    <option value="vue">Vue</option>
  </select>
</form>

После отправки формы сервер получает:

framework=react

Таким образом, text остаётся исключительно UI-слоем, тогда как value определяет контракт данных между интерфейсом и серверной логикой.

Обязательные поля в множественном выборе

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

new SlimSelect({
  select: '#select',
  settings: {
    multiple: true
  },
  data: [
    { text: 'Red', value: 'red' },
    { text: 'Green', value: 'green' }
  ]
});

Результат выбора:

['red', 'green']

Здесь каждое значение массива соответствует полю value соответствующей опции.

Минимальная допустимая модель данных

С точки зрения Slim Select минимально допустимая модель всегда сводится к следующей структуре:

{
  text: string,
  value: string | number
}

Любое расширение (иконки, группы, метаданные) строится поверх этой основы, не заменяя её.

Оглавление