Mixing grouped and non-grouped OPTIONs inside a SELECT?

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?

whitespace

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

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! :)

lammert

11:33 am on Apr 11, 2015 (gmt 0)

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>

whitespace

11:12 pm on Apr 11, 2015 (gmt 0)

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>