<optgroup>: عنصر OPTGROUP
آخر تحديث: 2026-10-13
<optgroup>عنصر OPTGROUP
يجمّع الخيارات داخل select، ويُعرض كتسمية مجموعة غير قابلة للاختيار.
| الفئة | النماذج |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </optgroup> وسم |
| الحالة | قياسي |
📝 البنية
<select>
<optgroup label="فواكه">
<option>تفاح</option>
</optgroup>
</select>⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
label | The group's label text (required). | |
disabled | Disables all options in the group. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <optgroup> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： optgroup لا يمكن تداخله، ويجب أن تبقى خياراته بداخله.
❓ الأسئلة الشائعة
Qما وظيفة optgroup؟
Aيجمع
<option> داخل <select>، وتعرض سمة label عنوان المجموعة (مثل «الشمال» و«الجنوب»). وعنوان المجموعة غير قابل للاختيار — وظيفته تنقل تصنيفية فقط، فيتحسن قراءة القوائم الطويلة تحسنًا واضحًا.Qهل يمكن تداخل optgroup؟
Aلا، لا تسمح المواصفات إلا بمستوى تجميع واحد — فداخل optgroup لا يدخل إلا option، وoptgroup المتداخل HTML غير صحيح. وللتصنيفات على مستويين فأكثر فكّر في نصوص خيارات ذات بادئة أو مكونات مخصصة.
Qهل يُرسل label الخاص بـ optgroup؟
Aلا. يُرسل فقط value للخيار المحدد، وعنوان المجموعة للعرض فقط. وهو لا يشارك في التحقق أيضًا، وتعطيل optgroup كاملة (سمة disabled) يعطّل جميع خياراتها تبعًا.
🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
