Multiple columns for drop-down (select) menu

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

Received on Thursday, 28 October 2010 12:31:43 UTC