Can I style a <select> element to show columns?

Question

I'm trying to create a column-based list within a <select> element with multiple=multiple - what I'd like to see in the menu is:

Opt1    Opt5    Opt9
Opt2    Opt6    Opt10
Opt3    Opt7    Opt11
Opt4    Opt8    Opt12

Is this possible? I'm certainly open to doing this in jQuery but would prefer CSS.

Answer 1

It is most definitely possible.

There are several options suggested in this similar SO question.

And this very popular question takes it a bit further, adding autocomplete.

And if you google "jquery multi-column dropdownlist" you can find several more choices.

BTW, the "multiple" attribute specifies whether the user can select multiple items in the list, not whether there are multiple columns displayed in the dropdownlist.

Answer 2

I don't think this is possible with CSS.

However, you can make three selects and use javascript to make sure just one of them is selected.

Here is a simple example how to do it with jQuery:

$('.columnselect').click(function()
{
    var id = $(this).attr('id');
    $('.columnselect:not([id="' + id + '"]) option:selected').attr('selected', false);
})

See http://jsfiddle.net/eJmgz/

If you like to have multi select just remove the Javascript code.