Атрибут id тега <option>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <option>, который может использоваться для:
- Стилизации конкретной опции через CSS
- Быстрого доступа к опции через JavaScript
- Связывания с другими элементами интерфейса
<select>
<option id="default-option">Выберите вариант</option>
<option id="option-1" value="1">Первый вариант</option>
<option id="option-2" value="2">Второй вариант</option>
</select>
Основные правила:
| Правило | Пример | Некорректный пример |
|---|---|---|
| Уникальность | id="user-role-admin" |
Повторение id на странице |
| Без пробелов | id="premium_option" |
id="premium option" |
| Чувствительность к регистру | id="Option1" ≠ id="option1" |
- |
Практическое применение:
<select id="product-select">
<option id="prod-default" value="">Выберите продукт</option>
<option id="prod-1001" value="1001">Ноутбук X1</option>
</select>
<script>
// Доступ к опции по id
const premiumOption = document.getElementById('prod-1001');
premiumOption.style.fontWeight = 'bold';
</script>
Рекомендации по использованию:
- Используйте осмысленные имена, отражающие назначение опции
- Избегайте общих имен типа "option1", "option2"
- Придерживайтесь единого стиля именования (kebab-case или camelCase)
- Для стилизации групп опций используйте классы
Ограничения:
- Не должен начинаться с цифры
- Не должен содержать спецсимволы (кроме дефиса и подчеркивания)
- В некоторых браузерах может стать глобальной переменной