Структура объекта option

В библиотеке Slim Select каждая строка выпадающего списка представляется объектом option. Именно этот объект определяет:

  • отображаемый текст;
  • внутреннее значение;
  • состояние выбора;
  • доступность пункта;
  • дополнительные атрибуты;
  • пользовательские данные;
  • HTML-классы;
  • поведение поиска;
  • структуру группировки.

Библиотека преобразует обычные HTML-элементы <option> в собственную внутреннюю структуру данных. При программной инициализации список может полностью строиться из массива объектов option.

Базовая структура объекта

Минимальный объект выглядит следующим образом:

{
  text: 'JavaScript',
  value: 'js'
}

Здесь:

  • text — отображаемый текст;
  • value — значение пункта.

Пример полной инициализации:

new SlimSelect({
  select: '#skills',
  data: [
    {
      text: 'JavaScript',
      value: 'js'
    },
    {
      text: 'TypeScript',
      value: 'ts'
    },
    {
      text: 'Python',
      value: 'python'
    }
  ]
})

Основные свойства объекта option

text

Свойство text задаёт текст, отображаемый внутри списка.

{
  text: 'Frontend Developer',
  value: 'frontend'
}

Именно это значение видит пользователь в dropdown-списке.

Особенности

  • поддерживает строки любой длины;
  • участвует в поиске;
  • отображается в выбранных элементах;
  • может содержать спецсимволы.

Пример:

{
  text: 'C++ / Embedded Systems',
  value: 'cpp'
}

value

Свойство value содержит внутреннее значение option.

{
  text: 'JavaScript',
  value: 'js'
}

Именно value:

  • отправляется через формы;
  • возвращается методами Slim Select;
  • используется при сравнении выбранных элементов.

Рекомендации

Чаще всего используют:

  • идентификаторы;
  • slug-значения;
  • UUID;
  • короткие коды.

Пример:

{
  text: 'Germany',
  value: 'de'
}

selected

Свойство selected определяет, выбран ли пункт по умолчанию.

{
  text: 'JavaScript',
  value: 'js',
  selected: true
}

После инициализации элемент окажется выбран автоматически.

Использование в multiple select

data: [
  {
    text: 'JavaScript',
    value: 'js',
    selected: true
  },
  {
    text: 'TypeScript',
    value: 'ts',
    selected: true
  }
]

disabled

Свойство disabled отключает option.

{
  text: 'Premium Feature',
  value: 'premium',
  disabled: true
}

Такой элемент:

  • нельзя выбрать;
  • визуально отображается как неактивный;
  • исключается из обычного взаимодействия.

Дополнительные свойства

placeholder

Некоторые версии Slim Select поддерживают специальный placeholder-option.

Пример:

{
  text: 'Select a country',
  placeholder: true
}

Такой элемент:

  • отображается как placeholder;
  • не считается полноценным значением;
  • используется в single select.

html

Свойство html позволяет выводить HTML вместо обычного текста.

{
  text: 'JavaScript',
  value: 'js',
  html: '<strong>JavaScript</strong>'
}

Особенности

Если используется html:

  • визуально отображается HTML;
  • text всё равно остаётся важным;
  • поиск обычно работает по text.

Пример:

{
  text: 'Urgent',
  value: 'urgent',
  html: '<span class="red-label">Urgent</span>'
}

class

Свойство class добавляет CSS-класс option-элементу.

{
  text: 'Admin',
  value: 'admin',
  class: 'role-admin'
}

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

  • стилизовать отдельные пункты;
  • менять цвета;
  • добавлять иконки через CSS;
  • выделять важные элементы.

style

Некоторые реализации поддерживают inline-стили.

{
  text: 'Danger',
  value: 'danger',
  style: 'color:red; font-weight:bold;'
}

Работа с пользовательскими данными

data

Свойство data используется для хранения произвольной информации.

{
  text: 'John Doe',
  value: '15',
  data: {
    department: 'IT',
    level: 'Senior'
  }
}

Применение

Поле удобно для:

  • хранения метаданных;
  • дополнительных параметров;
  • информации для шаблонов;
  • интеграции с API.

Доступ к data

Пример получения объекта:

const slim = new SlimSelect({
  select: '#users',
  data: [
    {
      text: 'John Doe',
      value: '15',
      data: {
        department: 'IT'
      }
    }
  ]
})

Получение выбранного значения:

const selected = slim.getSelected()

console.log(selected)

Структура option внутри групп

Slim Select поддерживает группы (optgroup).

Внутри группы используются те же объекты option.

Пример:

data: [
  {
    label: 'Frontend',
    options: [
      {
        text: 'JavaScript',
        value: 'js'
      },
      {
        text: 'TypeScript',
        value: 'ts'
      }
    ]
  }
]

Полная структура объекта

Полный вариант option может выглядеть так:

{
  text: 'JavaScript',
  value: 'js',
  html: '<strong>JavaScript</strong>',
  selected: true,
  disabled: false,
  class: 'lang-js',
  style: 'color: #f7df1e;',
  data: {
    type: 'frontend',
    popularity: 'high'
  }
}

Отличие text от html

Использование только text

{
  text: 'JavaScript',
  value: 'js'
}

Результат:

  • простой текст;
  • безопасный рендеринг;
  • отсутствие HTML.

Использование html

{
  text: 'JavaScript',
  value: 'js',
  html: '<span class="badge">JavaScript</span>'
}

Результат:

  • кастомная разметка;
  • сложное оформление;
  • возможность вставки иконок.

Связь объекта option с HTML

Следующий HTML:

<option value="js">JavaScript</option>

Во внутренней структуре Slim Select превращается примерно в:

{
  text: 'JavaScript',
  value: 'js'
}

Обработка selected и disabled из HTML

HTML:

<option value="js" selected>
  JavaScript
</option>

<option value="php" disabled>
  PHP
</option>

После преобразования:

{
  text: 'JavaScript',
  value: 'js',
  selected: true
}

{
  text: 'PHP',
  value: 'php',
  disabled: true
}

Динамическое создание option

Добавление новых элементов

slim.setData([
  {
    text: 'Vue',
    value: 'vue'
  },
  {
    text: 'React',
    value: 'react'
  }
])

Генерация из массива API

const users = apiResponse.map(user => ({
  text: user.name,
  value: user.id,
  data: user
}))

Использование сложных структур

Хранение объекта пользователя

{
  text: 'John Doe',
  value: '25',
  data: {
    id: 25,
    role: 'admin',
    permissions: ['read', 'write']
  }
}

Хранение изображений

{
  text: 'Germany',
  value: 'de',
  html: `
    <div class="country-item">
      <img src="de.png">
      Germany
    </div>
  `
}

Поиск и option

Slim Select использует text при поиске.

{
  text: 'JavaScript',
  value: 'js',
  html: '<strong>JavaScript</strong>'
}

Поиск будет ориентироваться именно на text.

Важность уникальности value

Значения value желательно делать уникальными.

Плохой пример:

[
  {
    text: 'JavaScript',
    value: '1'
  },
  {
    text: 'TypeScript',
    value: '1'
  }
]

Это может привести к:

  • конфликтам выбора;
  • неправильному состоянию selected;
  • ошибкам при удалении элементов.

Поддержка множественного выбора

Для multiple select структура option не меняется.

{
  text: 'Vue',
  value: 'vue'
}

Меняется только логика хранения selected-значений.

Проверка типов данных

Корректные типы

{
  text: 'JavaScript',
  value: 'js'
}

Нежелательные типы

{
  text: 123,
  value: {}
}

Подобные конструкции могут вызывать:

  • ошибки сериализации;
  • проблемы поиска;
  • некорректное отображение.

Использование HTML-атрибутов

Некоторые версии и плагины поддерживают передачу атрибутов.

Пример:

{
  text: 'Download',
  value: 'download',
  attributes: {
    'data-id': '15',
    'data-type': 'file'
  }
}

Часто используемая структура

Наиболее распространённый формат:

{
  text: 'Option name',
  value: 'option_value'
}

Расширенный производственный вариант:

{
  text: 'John Doe',
  value: '15',
  selected: false,
  disabled: false,
  class: 'user-option',
  data: {
    role: 'manager',
    department: 'sales'
  }
}

Внутреннее представление данных

Slim Select хранит option как объекты Javascript, что даёт ряд преимуществ:

  • динамическое обновление;
  • фильтрация;
  • поиск;
  • сортировка;
  • синхронизация с API;
  • удобная сериализация;
  • реактивное обновление интерфейса.

Типичная структура массива data

data: [
  {
    text: 'JavaScript',
    value: 'js'
  },
  {
    text: 'TypeScript',
    value: 'ts'
  },
  {
    text: 'Python',
    value: 'python'
  }
]

Комбинирование групп и option

data: [
  {
    label: 'Frontend',
    options: [
      {
        text: 'React',
        value: 'react'
      },
      {
        text: 'Vue',
        value: 'vue'
      }
    ]
  },
  {
    label: 'Backend',
    options: [
      {
        text: 'Node.js',
        value: 'node'
      },
      {
        text: 'Laravel',
        value: 'laravel'
      }
    ]
  }
]

Практический пример полной конфигурации

new SlimSelect({
  select: '#employees',
  data: [
    {
      label: 'Management',
      options: [
        {
          text: 'John Smith',
          value: '1',
          selected: true,
          class: 'manager',
          data: {
            role: 'CEO'
          }
        }
      ]
    },
    {
      label: 'Developers',
      options: [
        {
          text: 'Alice Brown',
          value: '2',
          html: `
            <div class="employee">
              <strong>Alice Brown</strong>
              <small>Frontend Developer</small>
            </div>
          `,
          data: {
            stack: ['React', 'TypeScript']
          }
        }
      ]
    }
  ]
})
Оглавление