HTML muliple select should look like HTML select

Question

Hi I am trying to use a HTML select box with 'multiple' select options and size to 1 as below `

<SELECT NAME="toppings" MULTIPLE SIZE=5>
<OPTION VALUE="mushrooms">mushrooms
<OPTION VALUE="greenpeppers">green peppers
</SELECT>

When the size is set to 1 small scrollbar appears which makes the page clumsy.If I increase the size its eating up my page since there are around 20 such multiple boxes in and around the page. I am looking for a solution which looks like <SELECT> but should function as multiple Is this possible. I remember seen something similar but don't remember exactly. Any ideas

I had uploaded the image

Answer 1

You can't get a multiple select to display as a regular select. If you could, how would you expect the user to select multiple values ?

That being said, the solution would be to create your own custom solution or use one of the jquery plugin out there.

Answer 2

Check out this code... it turns your multi-row select into a dropdown with checkboxes using jQuery.

http://dropdown-check-list.googlecode.com/svn/trunk/src/demo.html

Answer 3

I'm going to go in bit of a different direction with this one:

You really, really need to rethink your design if you need to do what you are doing here. You might also want to pick up a book on HTML; and interface design in general.

When things look a certain way, that gives people certain expectations: A single-select should always look like a single-select, and a multiple-select should never look like a single-select.

Answer 4

You can't hide the scroll bar in a multi-select... otherwise it would look like a text-area and may confuse a user. If you really want to hide it, make a div and float it over the area of the scrollbar to simulate hiding it. I don't recommend it but its a possibility.