HTML الوسم <optgroup>

تعريفه

نستخدم الوسم <optgroup> على النحو التالي لتقسيم عناصر القائمة المنسدلة التي ننشئها بواسطة الوسم <select> إلى مجموعات.

<select>
	
    <optgroup label="title">
        <option>option-1</option>
        <option>option-2</option>
    </optgroup>
	
    <optgroup label="title">
        <option>option-1</option>
        <option>option-2</option>
    </optgroup>
</select>
	

مكان الكلمة title نضع العنوان الذي سيتم وضعه للمجموعة التي تم وضع العناصر فيها.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <optgroup>.

خصائصه

الخاصية disabled

يمكن إضافتها للوسم لجعله غير مفعل مما يعني أنه سيظهر في القائمة و لكن لن يكون بإمكان المستخدم اختيار العناصر الموضوعة بداخله.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية label

يمكن إضافتها للوسم لوضع عنوان لمجموعة العناصر الموضوعة بداخله.
العنوان المراد وضعه للمجموعة يجب وضعه كقيمة لها.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

في المثال التالي قمنا بإضافة مربع نص مربوط بقائمة خيارات مساعدة تتضمن 6 قيم مجهزة مسبقاً.

<label for="language">Select Language</label>
<select name="language" id="language">
	<optgroup label="Meta Language">
		<option>HTML</option>
		<option>XML</option>
	</optgroup>
	<optgroup label="Programming Language">
		<option>Java</option>
		<option>C++</option>
		<option>Python</option>
	</optgroup>
</select>
		

جرب الكود

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

تقسيم الخيارات في القائمة لمجموعات هو أمر اختياري و لكنه يساعد المستخدم على إيجاد الخيار بشكل أسرع خاصةً إذا كانت القائمة تحتوي على خيارات كثيرة.
لهذا في حال كانت القائمة تحتوي على خيارات كثيرة مشابهة أو مشتركة فالأفضل أن تقسّمها لمجموعات.