Атрибут data-* тега <option>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементах <option>. Эти пользовательские атрибуты могут быть использованы JavaScript для управления поведением опций или передачи метаданных.
<select id="product-select">
<option value="1" data-price="1990" data-stock="true">Товар A</option>
<option value="2" data-price="2990" data-stock="false">Товар B</option>
</select>
Основные правила именования:
| Правило | Пример |
|---|---|
Должен начинаться с data- |
data-id, data-price |
| Может содержать дефисы | data-product-type |
| Значение может быть любой строкой | data-info="some-value" |
Доступ к данным через JavaScript:
<script>
const select = document.getElementById('product-select');
select.addEventListener('change', function() {
const selectedOption = this.options[this.selectedIndex];
console.log('Цена:', selectedOption.dataset.price);
console.log('Наличие:', selectedOption.dataset.stock);
});
</script>
Практическое применение:
<select id="city-select">
<option value="1" data-region="europe" data-population="12000000">Москва</option>
<option value="2" data-region="asia" data-population="8000000">Новосибирск</option>
</select>
<div id="city-info"></div>
<script>
document.getElementById('city-select').addEventListener('change', function() {
const option = this.options[this.selectedIndex];
const infoDiv = document.getElementById('city-info');
infoDiv.innerHTML = `
Регион: ${option.dataset.region}
Население: ${option.dataset.population} `; }); </script>
Население: ${option.dataset.population} `; }); </script>
Рекомендации по использованию:
- Используйте для хранения ID, цен, флагов состояния
- Избегайте сложных структур данных (используйте JSON для сериализации)
- Придерживайтесь единого стиля именования (kebab-case)
- Не храните важные данные только в data-атрибутах
Пример с JSON данными:
<select>
<option value="1" data-meta='{"id":101,"category":"premium"}'>Товар Premium</option>
</select>
<script>
const option = document.querySelector('option');
const meta = JSON.parse(option.dataset.meta);
console.log(meta.category); // "premium"
</script>
Особенности работы:
- Доступны через свойство
datasetв JavaScript - Не влияют на отображение по умолчанию
- Не участвуют в отправке формы
- Поддерживаются всеми современными браузерами
Примечание: Атрибуты data-* предоставляют удобный способ хранения дополнительной информации, но для сложных сценариев управления состоянием предпочтительнее использовать JavaScript-объекты или state-менеджмент в современных фреймворках.