Hi
It's sometimes useful to show more than one piece of information on each
line inside a drop-down menu (select box). At the moment you can include
multiple text values inside the option tags separated by spaces but it's
very difficult to line them up nicely into columns.
What would be the point you ask? Well maybe you want to show the product
code and product name on one <option> line to help differentiate between
products, or if I had a list of timezones and wanted to line up all the
timezone names and GMT offsets nicely to help the user e.g.
Pacific/Auckland +12:00
Australia/Brisbane +10:00
At the moment you can put this information on a line, but it's a mess
because the information doesn't line up nicely inside the drop-down. I
don't think it's possible to line it up into columns with HTML or CSS
styling at the moment and you need to use non breaking spaces or a
JavaScript div overlay which emulates the select box - the
implementations I've seen are pretty horrendous.
How about option columns and let each option/column be styled
differently with a class or inline style? E.g.
<select name="timezones">
<option value="1">
<column>Pacific/Auckland</column>
<column>+12:00</column>
</option>
<option value="2">
<column>Australia/Brisbane</column>
<column>+10:00</column>
</option>
</select>
If the column tag isn't present then it would just fall back to regular
display. Is there a better way to implement it? Is it worth including in
the spec?
-Chris
