العنصر <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.