Multi-Select Scrolling List Box

The HTML select tag provides two different ways to present a list of selections.

One is a dropdown list where one item can be selected. The other is a scrolling list where multiple items can be selected.

They are coded very similar.

Let's start with a dropdown list. Then add the attributes that convert the dropdown list into a multi-select scrolling list box.

Here is a dropdown list example followed by the code that creates it.

This is the code to create the dropdown list:

<select name="example">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
<option>Seven</option>
</select>

The above dropdown list code can be converted into a multi-select scrolling box by adding two attributes. One is the multiple attribute and the other is the size attribute.

Here is an example multi-select converted from the above dropdown.

Here is the code for the multi-select scrolling box. Comments are below the code.

<select name="example" multiple size="3">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
<option>Six</option>
<option>Seven</option>
</select>

The multiple attribute is a boolean (needs no value, just presence) — when present, multiple items may be selected; otherwise only one may be selected. When multiple is specified, most browsers will show a scrolling list box instead of a dropdown.

The size="3" attribute instructs the browser to make 3 of the list visible. The number may be changed. Use size="5" to show 5 list items, for example. When the number of list items is more than the number of visible items, the list may be scrolled. If no size attribute is provided, most browsers assume no list items shall be shown.

The switch is simple. Add 2 attributes to change a dropdown list into a multi-select scrolling list box.

1. The boolean multiple attribute.
2. The size attribute with a value indicating how many list items to show.

A multi-select scrolling box can be used on a web page whenever multiple items may be selected.

(This content first appeared in Possibilities newsletter.)

Will Bontrager