العنصر `<optgroup>`

يُنشِئ العنصر <optgroup> مجموعةً من الخيارات ضمن العنصر <select>.

مثال بسيط عن استخدام العنصر <optgroup> لثلاث مرات ضمن عنصر <select> أحدها مع الخاصية disabled:

<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>` آخر.
الوسم المختصر	وسم البداية إجباري، أما وسم النهاية اختياري إن كان العنصر متبوعًا مباشرةً بعنصر `<optgroup>` آخر، أو لم يكن يحتوي العنصر الأب على أيّ محتوى آخر.
العناصر الأب	العنصر `<select>`.
واجهة DOM	`HTMLOptGroupElement`

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

`disabled`

إذا ضُبِطَت هذه القيمة المنطقية (Boolean) فلن يستطيع المستخدم اختيار أيّ خيار في المجموعة، وتعرض المتصفحات هذه الخيارات عادةً بلونٍ فضي ولن تستقبل الأحداث مثل النقرات أو التركيز.

`label`

اسم مجموعة الخيارات، والتي يمكن أن يستخدمها المتصفح لإظهار اسم لمجموعة الخيارات في واجهة المستخدم.

يجدر بالذكر أنَّ هذه الخاصية إجبارية.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <optgroup> مع ضبط الخاصية display إلى block، وجعل وزن الخط (font-weight) أثخن من الطبيعي:

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

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.
مواصفة HTML 4.01.