<optgroup> – елемент групи варіантів

Елемент HTML <optgroup> створює групування варіантів усередині елемента <select>.

Спробуйте його в дії

Примітка: Елементи 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>

Результат

Технічний підсумок

Категорії вмісту Жодних.
Дозволений вміст Нуль або більше елементів <option>.
Пропуск тега Початковий тег є обов'язковим. Кінцевий тег є необов'язковим, якщо після цього елемента зразу стоїть інший елемент <optgroup>, або якщо батьківський елемент не має далі вмісту.
Дозволені батьківські елементи Елемент <select>.
Неявна роль ARIA group
Дозволені ролі ARIA Жодної дозволеної ролі
Інтерфейс DOM HTMLOptGroupElement

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
optgroup
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 5.5
Opera Full support Так
Safari Full support Так
WebView Android Full support Так
Chrome Android Full support Так
Firefox for Android Full support 4
Opera Android Full support Так
Safari on iOS Full support Так
Samsung Internet Full support Так
disabled
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 8
Opera Full support Так
Safari Full support Так
WebView Android Full support Так
Chrome Android Full support Так
Firefox for Android Full support 4
Opera Android Full support Так
Safari on iOS Full support Так
Samsung Internet Full support Так
label
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 5.5
Opera Full support Так
Safari Full support Так
WebView Android Full support Так
Chrome Android Full support Так
Firefox for Android Full support 4
Opera Android Full support Так
Safari on iOS Full support Так
Samsung Internet Full support Так

Дивіться також