HTML <optgroup> Tag

The <optgroup> element in HTML is used to group options in a drop-down list. For example, you may have seen grouped list items, for example, graduation and post-graduation courses are displayed in different groups in a single drop-down list.

Following are the attributes−

disabled: Specifies that an option-group should be disabled
label: Specifies a label for an option-group Let us now see an example to implement the <optgroup> element:

Let us now see an example to implement the element −

Example

<!DOCTYPE html>
<html>
<body>
<h2>Educational Qualification</h2>
<select>
   <optgroup label="Graduation">
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</optgroup>
   <optgroup label="Postgraduation">
   <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>

Output

HTML <optgroup> Tag

In the above example, we have two optgroup to set a dropdown list with two sections. In this way, we have grouped options in a drop-down list−

<select>
<optgroup label="Graduation">
<option value="bca">BCA</option>
<option value="bcom">B.COM</option>
<option value="btech">B.TECH</option>
</optgroup>
<optgroup label="Postgraduation">
<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>

The option element set is used to set different options for the drop-down list and allows users to select any one of them from a single optiongroup−

<option value="bca">BCA</option>
<option value="bcom">B.COM</option>
<option value="btech">B.TECH</option>