Практика: группы вариантов в нативном select
Optgroup помогает разделить варианты выбора на понятные категории. Это полезно, когда небольшой список уже трудно просматривать одной непрерывной последовательностью.
Назначение
Optgroup помогает разделить варианты выбора на понятные категории. Это полезно, когда небольшой список уже трудно просматривать одной непрерывной последовательностью.
Как это работает
У каждого optgroup задайте label, а у option — стабильное value. Название группы не является самостоятельным выбираемым значением. В примере выбирается конкретная тема, а не общий раздел.
Пример
<label for="grouped-topic">Тема упражнения</label><select id="grouped-topic" name="topic"><optgroup label="HTML"><option value="html-links">Ссылки</option><option value="html-tables">Таблицы</option></optgroup><optgroup label="CSS"><option value="css-grid">Сетка</option><option value="css-type">Типографика</option></optgroup></select>
<style>select{display:block;max-width:100%;font:inherit;padding:.6rem;margin-block:.5rem}</style>Что должно получиться
Варианты сгруппированы по двум разделам. Выбранное значение остаётся кодом конкретной темы, который можно передать форме после добавления обработчика.
Граница применения и частая ошибка
Не пытайтесь построить глубокое дерево вложенных optgroup: это не модель нативного select. Большой справочник из сотен вариантов требует другой навигации или поиска. Не снимайте нативное оформление без проверки клавиатуры и видимого индикатора выбора.
Самостоятельная проверка
Пройдите варианты клавиатурой и посмотрите select.value в своём документе. Измените текст подписи option, сохранив value, и убедитесь, что контракт данных не зависит от локализации.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.