Grouping inside dropdown

Grouping inside the dropdown list is normally misunderstood by developers for a long time.

The required outcome is shown below:

To get an output like this on a dropdown, it is not good to add a new item in the dropdown and then add validations for not selecting that option.

The solution to this problem is failry simple and lies in basic HTML:

<select>
<optgroup label=”Group1″>
 <option>11</option>
 <option>12</option>
 <option>13</option>
</optgroup>
<optgroup label=”Group2″>
 <option>21</option>
 <option>22</option>
 <option>23</option>
</optgroup>
</select>

Use the “optgroup” property provided by HTML itself for such groupings.