Синтаксис

<select>
    <optgroup label="...">
        <option>...</option>
    </optgroup>
</select>

Описание

Тег <optgroup> (от англ. option group — группа вариантов) представляет собой контейнер, внутри которого располагаются теги <option>, объединённые в одну группу.

Особенностью <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения.

Внимание!

Элемент <optgroup> должен располагаться в контейнере <select>.

Атрибуты, которые можно использовать в теге <optgroup>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут Значение Описание
disabled disabled

Указывает, что элементы в этой группе недоступны для выбора

label текст

Определяет наименование для группы, которое будет отображаться в выпадающем списке.
Обязательный атрибут

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тег optgroup</title>
</head>
<body>
    <select>
        <optgroup label="Группа 1">
            <option>параметр 1.1</option>
            <option>параметр 1.2</option>
            <option>параметр 1.3</option>
            <option>параметр 1.4</option>
        </optgroup>
        <optgroup label="Группа 2">
            <option>параметр 2.1</option>
            <option>параметр 2.2</option>
            <option>параметр 2.3</option>
            <option>параметр 2.4</option>
        </optgroup>
    </select>
</body>
</html>

Отображение в браузере:

Параметры CSS по умолчанию

optgroup {
    font-weight: bolder;
    display: block;

Поддержка браузера

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge

<optgroup> Да Да Да Да Да

Комментарии

Оставить комментарий:
* отправляя форму, я даю согласие на обработку персональных данных

Продолжаем добавлять языки программирования для Вас.
Впереди много интересного!

Только свежие новости программирования и технологий каждый день.