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.

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s