I’d like to think that I know a fair amount about core HTML.  That said there’s always room to learn more, and yesterday was a case in point.

Until now, when wanting to separate groups of elements in a selection list we’ve always introduced option elements surrounded by extra characters, e.g. (“–Intermediate / Higher /Advanced Higher”) in the example below.

<SELECT>
<OPTION>--National Assessments (5-14)
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
<OPTION>E
<OPTION>F
<OPTION>--Access 1,2,3 / Core Skills
<OPTION>Pass
<OPTION>Fail
<OPTION>--Intermediate / Higher /Advanced Higher
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
<OPTION>--Standard Grades
<OPTION>Grade 1 - Credit Level
<OPTION>Grade 2 - Credit Level
<OPTION>Grade 3 - General Level
<OPTION>Grade 4 - General Level
<OPTION>Grade 5 - Foundation Level
<OPTION>Grade 6 - Foundation Level
<OPTION>Grade 7 - Course Completed
<OPTION>-HNC/HND
<OPTION>Pass
<OPTION>Fail
<OPTION>--NVQ/SVQ
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5</SELECT>

As a solution this is a bit messy as the user is still able to select the separator options, and therefore relies on client or server validation to prevent this being saved.  What a revolution then to find that there is an HTML element that allows you to group together a number of option elements – and it’s called OPTGROUP.  Go figure!

In action then, the list above then becomes:

<SELECT>
<OPTGROUP label="National Assessments (5-14)">
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
<OPTION>E
<OPTION>F
</OPTGROUP><OPTGROUP>Access 1,2,3 / Core Skills
<OPTION>Pass
<OPTION>Fail
</OPTGROUP><OPTGROUP label="Intermediate / Higher /Advanced Higher">
<OPTION>A
<OPTION>B
<OPTION>C
<OPTION>D
</OPTGROUP><OPTGROUP label="Standard Grades">
<OPTION>Grade 1 - Credit Level
<OPTION>Grade 2 - Credit Level
<OPTION>Grade 3 - General Level
<OPTION>Grade 4 - General Level
<OPTION>Grade 5 - Foundation Level
<OPTION>Grade 6 - Foundation Level
<OPTION>Grade 7 - Course Completed
</OPTGROUP><OPTGROUP label="HNC/HND">
<OPTION>Pass
<OPTION>Fail
</OPTGROUP><OPTGROUP label="NVQ/SVQ">
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5</OPTGROUP></SELECT>

It’s browser compliant, and you can style the OptGroup elements different to the Option elements.

Now I can’t wait to see what I can learn today.

Advertisements