Friday, May 9, 2014

ya learn something old every day: select tag with optgroup

So even though it may have been sort of around since 2000 somehow I missed the optgroup tag, it just flew under my radar. It lets you add grouping/headers in side the humble select tag.

So with code like
<select>
 <optgroup label="first group">
   <option>option 1</option>
   <option>option 2</option>
</optgroup> 
<optgroup label="second group">
   <option>option 3</option>
   <option>option 4</option>
</optgroup>
</select>
you get something like this: 

In theory you should be using labels for the option (for backwards compatibility) with the content of the option tag being the version displayed for non-optgroup labels...

I learned about this kind of the hardway... there's a reasonable cool jquery enhanced select box widget called select2. Its example page is a bit crap... the first example source doesn't mention anything about optgroup, but the exampl on the left is using it as part of a "normal select box".

No comments:

Post a Comment