HTML-элемент <optgroup> позволяет группировать опции, находящиеся внутри элемента <select>.
| Категории контента | Нет |
|---|---|
| Допустимый контент | Ноль или более <option> элементов. |
| Пропуск тегов | Открывающий тег обязателен. Закрывающий тег может быть опущен, если сразу после элемента находится следующий элемент <optgroup>, или если это последний элемент внутри родителя. |
| Допустимые родители | Элемент <select> |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLOptGroupElement |
Примечание: Элементы optgroup не могут быть вложенными друг в друга.
Аттрибуты
Элемент <optgroup> допускает использование глобальных аттрибутов.
disabled- Если установить этот аттрибут, опции, находящиеся внутри элемента станут недоступными для выбора. Часто браузеры отображают эти опции серым цветом и игнорируют срабатывающие на них события, таие как события мыши или события получения фокуса.
label- Имя группы, которое будет отображено браузером в выпадающем списке. Этот атрибут обязателен.
Пример
<select>
<optgroup label="Группа 1">
<option>Опция 1.1</option>
</optgroup>
<optgroup label="Группа 2">
<option>Опция 2.1</option>
<option>Опция 2.2</option>
</optgroup>
<optgroup label="Группа 3" disabled>
<option>Опция 3.1</option>
<option>Опция 3.2</option>
<option>Опция 3.3</option>
</optgroup>
</select>
Результат
Спецификации
| Спецификация | Статус | Комментарии |
|---|---|---|
| HTML Living Standard Определение '<optgroup>' в этой спецификации. |
Живой стандарт | |
| HTML5 Определение '<optgroup>' в этой спецификации. |
Рекомендация | |
| HTML 4.01 Specification Определение '<optgroup>' в этой спецификации. |
Рекомендация |
Совместимость с браузерами
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
optgroup | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 5.5 | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
disabled | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 8 | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
label | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 5.5 | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка
Смотрите также
- Элементы, имеющие отношение к формам:
<form>,<legend>,<label>,<button>,<select>,<datalist>,<option>,<fieldset>,<textarea>,<keygen>,<input>,<output>,<progress>и<meter>.