Элемент optgroup

Контейнерный элемент optgroup позволяет группировать элементы внутри элемента select для формирования иерархического меню.

Помимо общих атрибутов class, dir, id, lang, style и title, для элемента optgroup, определены следующие атрибуты:

· label – имя для группы пунктов;

· disabled (без значения) – если задан, группа переводится в неактивное (отключенное) состояние.

Для элемента optgroup можно задать стили шрифта, текста, цвета текста и фона, а также (в Firefox) стили блоковой модели документа.

Для элемента optgroup в интерфейсе HTMLOptGroupElement DOM2 HTML, помимо общих свойств, определены следующие свойства:

· label – значение атрибута label;

· disabled (false или true) – состояние группы (активное или неактивное).

Пример 4.5.34. Использование элемента optgroup:

1. Простая группа в раскрывающемся меню документе HTML:

<form>

<select name="cities">

<optgroup label="Украина">

<option>Киев</option>

<option>Днепропетровск</option>

<option>Львов</option>

</optgroup>

<optgroup label="Россия">

<option>Москва</option>

<option>Санкт-Петербург</option>

<option>Владивосток</option>

</optgroup>

</select>

</form>

выводит следующую Web-страницу:

2. Вывод групп с использованием стилей в раскрывающемся меню документа HTML:

<form>

<select name="cities" style="font-weight: bold">

<optgroup label="Украина"

style="color: blue; background-color: #C0C000">

<option>Киев</option>

<option>Днепропетровск</option>

<option>Львов</option>

</optgroup>

<optgroup label="Россия"

style="color: red; background-color: blue">

<option>Москва</option>

<option>Санкт-Петербург</option>

<option>Владивосток</option>

</optgroup>

</select>

</form>

Вывод Web-страницы будет иметь следующий вид:

3. Если для второй группы в примере 4.5.34(1) задать элемент optgroup с атрибутом disabled:

<optgroup label="Россия" disabled>

то вывод Web-страницы будет иметь следующий вид: