Question

I have a select field, with the multiple tag. Right now, the field has many options, so I don’t like the idea that all options are below each other. What I am trying to achieve, is to have more options in each row, to make the select field much smaller, and easier to navigate in. This is what the select field looks like now:

[option]
[option]
[option]
[option]

I would like it to look like this:

[option] [option] [option] [option]

Thanks.

Answer 1

This is a (relatively) simple solution that emulates a select element. I’ve written it in jQuery but it could be done in pure JS as well.

In my demo the elements are floated two per row but obviously this could be changed easily.

Here is the Fiddle.

Edit: Missed that it’s a multiple select. Here is an updated multiple select version.