HTML में <optgroup> एलिमेंट ड्रॉप-डाउन सूची में विकल्पों को समूहित करने के लिए उपयोग किया जाता है। उदाहरण के लिए, आपने समूहीकृत सूची आइटम देखे होंगे, जैसे ग्रेजुएशन और पोस्ट-ग्रेजुएशन कोर्स एक ही ड्रॉप-डाउन सूची में अलग-अलग समूहों में प्रदर्शित होते हैं।
निम्नलिखित एट्रिब्यूट्स हैं −
- disabled: निर्दिष्ट करता है कि एक विकल्प-समूह अक्षम होना चाहिए
- label: एक विकल्प-समूह के लिए लेबल निर्दिष्ट करता है। आइए अब <optgroup> एलिमेंट को लागू करने का एक उदाहरण देखें:
आइए अब एलिमेंट को लागू करने का एक उदाहरण देखें −
उदाहरण
<!DOCTYPE html> <html> <body> <h2>शैक्षणिक योग्यता</h2> <select> <optgroup label="स्नातक"> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </optgroup> <optgroup label="स्नातकोत्तर"> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </optgroup> </select> </body> </html>
आउटपुट
उपरोक्त उदाहरण में, हमारे पास ड्रॉप-डाउन सूची को दो खंडों के साथ सेट करने के लिए दो optgroup हैं। इस तरह, हमने ड्रॉप-डाउन सूची में विकल्पों को समूहित किया है −
<select> <optgroup label="स्नातक"> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </optgroup> <optgroup label="स्नातकोत्तर"> <option value="mca">MCA</option> <option value="mcom">M.COM</option> <option value="mtech">M.TECH</option> <option value="msc">M.Sc</option> </optgroup> </select>
option एलिमेंट सेट ड्रॉप-डाउन सूची के लिए विभिन्न विकल्प सेट करने के लिए उपयोग किया जाता है और उपयोगकर्ताओं को एक ही optiongroup से उनमें से किसी एक का चयन करने की अनुमति देता है −
<option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option>
