Атрибут data-* тега <optgroup>

Описание

Атрибуты data-* позволяют хранить дополнительную информацию в элементе <optgroup>. Эти пользовательские атрибуты могут быть использованы JavaScript для управления поведением групп опций.

Пример использования:
<select id="product-select"> <optgroup data-category="electronics" data-stock="true" label="Электроника"> <option>Смартфоны</option> <option>Ноутбуки</option> </optgroup> </select>

Основные правила именования:

Правило Пример
Должен начинаться с data- data-category
Может содержать дефисы data-product-type
Значение может быть любой строкой data-visible="true"

Доступ к данным через JavaScript:

<script> const optgroup = document.querySelector('optgroup[data-category="electronics"]'); console.log(optgroup.dataset.category); // "electronics" console.log(optgroup.dataset.stock); // "true" // Изменение данных optgroup.dataset.stock = "false"; </script>

Пример практического применения:

<select id="city-select"> <optgroup data-region="europe" data-available="true" label="Европа"> <option>Париж</option> <option>Берлин</option> </optgroup> <optgroup data-region="asia" data-available="false" label="Азия"> <option>Токио</option> <option>Сеул</option> </optgroup> </select> <script> document.getElementById('city-select').addEventListener('change', function() { const selectedOption = this.options[this.selectedIndex]; const optgroup = selectedOption.parentElement; if (optgroup.dataset.available === "false") { alert('Этот регион временно недоступен'); this.value = ''; } }); </script>

Рекомендации по использованию:

  • Используйте для хранения ID, флагов или метаданных
  • Избегайте хранения сложных структур данных
  • Придерживайтесь единого формата именования (kebab-case)
  • Для сложных данных используйте JSON-сериализацию

Пример с JSON данными:

<optgroup data-meta='{"id":123,"type":"premium"}' label="Премиум"> <option>Вариант 1</option> </optgroup> <script> const group = document.querySelector('optgroup'); const meta = JSON.parse(group.dataset.meta); console.log(meta.type); // "premium" </script>

Особенности работы:

  • Доступны через свойство dataset в JavaScript
  • Не влияют на отображение по умолчанию
  • Не используются поисковыми системами
  • Поддерживаются всеми современными браузерами

Примечание: Атрибуты data-* предоставляют стандартизированный способ хранения дополнительной информации в HTML-элементах. Они особенно полезны для связи разметки с JavaScript-логикой без использования нестандартных атрибутов.