Welcome to WebmasterWorld Guest from 34.237.76.249

Forum Moderators: open

Message Too Old, No Replies

Mixing grouped and non-grouped OPTIONs inside a SELECT?

It's valid but would this ever be used in the real world?

     
1:42 am on Apr 11, 2015 (gmt 0)

Full Member

Top Contributors Of The Month

joined:Apr 11, 2015
posts: 328
votes: 24


The SELECT element allows both OPTGROUP and OPTION elements as direct children (at the same time). Some OPTIONs can be children of an OPTGROUP, some OPTIONs can be directly inside the SELECT.

Do you know of any real world examples where this could perhaps be a requirement?

From a UX viewpoint this would seem to be a mistake in my opinion? Either all OPTIONs should appear in one or more OPTGROUPs or all OPTIONs should be direct children of the SELECT element? But it is valid HTML to mix the two.

(Reason for my curiosity... I have built a tool/plugin to construct SELECTs. Currently it allows one or the other, but not both at the same time! :)
11:33 am on Apr 11, 2015 (gmt 0)

Senior Member from KZ 

WebmasterWorld Senior Member lammert is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 10, 2005
posts: 2951
votes: 33


Simply spoken, if some options are not grouped, you don't use an option group to combine them. For example if you have a website where you can tag items in a zoo with an animal name. Some animals can have subdivisions.

<select name="animal">
<option value="1">Lion
<option value="2">Tiger
<optgroup label="Bears">
<option value="3">Brown bear
<option value="4">Black bear
<option value="5">Polar bear
</optgroup>
<option value="6">Giraffe
</select>
11:12 pm on Apr 11, 2015 (gmt 0)

Full Member

Top Contributors Of The Month

joined:Apr 11, 2015
posts: 328
votes: 24


Ok, yes, there could certainly be edge cases I guess (and at the discretion of the developer) - I've updated my code to handle this also.

But I still wonder (perhaps purely from a user experience point of view) that once you've introduced the concept of groups for some options you should perhaps make all the options to be in one group or another? Take your example, for instance...

<select name="animal"> 
<optgroup label="Cats">
<option value="1">Lion
<option value="2">Tiger
</optgroup>
<optgroup label="Bears">
<option value="3">Brown bear
<option value="4">Black bear
<option value="5">Polar bear
</optgroup>
<optgroup label="Ungulates">
<option value="6">Giraffe
</optgroup>
</select>