Questions tagged [html-select]

The selection (<select>) HTML element represents a user interface control that presents a menu of options. The options within the menu are represented by <option> elements, whose submitted values are determined by its value attribute.

<select name="myselect">
  <option value="some-text">Some Text</option>
</select>

Single versus Multiple Selection Menus

Single-selection menus are the default menus that you find much more option. Users are only allowed to select one option from the drop-down list of options. The control's size can also be changed to accommodate for a longer menu which scrolls through the options rather than creating a drop-down of the options. Any time a size of 2 or greater is used, the menu will become a scrollable box instead. The size specified will include that number of options in the viewable area of the selection menu (so defining a size of 4 will display 4 options high, with a scrollbar). To set the size, simply add size="4" to the <select> element, specifying whatever size you desire.

Multiple-selection menus should always have a size of at least 2, as specifying its size at 1 will cause browser rendering issues (it won't create a scrollbar). Since multiple options can be selected, these menus cannot utilize the drop-down feature. By default, when a select menu is made into a multiple-selection menu, it inherits a size of 4.

The Syntax for Multiple-Selection

<select multiple="multiple">...</select>

Note: While most browsers will still render the menu correctly by only using multiple, it is considered invalid syntax and you should always use the full multiple="multiple" format when setting a menu to multiple-selection. There is no other valid value (such as "single") that can be present inside this attribute.

Multiple-Selection and Server-Side Scripts

When sending your multiple-selection menu to a server-side script via POST or GET, you'll notice that some server-side languages will not parse all the values selected (if more than one) and create an array. Instead, it will only give you the last option which is selected in the menu. To fix this, we can change the name of the selection menu to account for all options by putting them into an array, specifying [] at the end. This will work for most programming languages, including PHP.

<select multiple="multiple" name="myselect[]">...</select>

Pre-Selecting an Option

Pre-selection is handy for providing a default option that the average user would select or that the system recommends being used (such as a privacy setting). Any option can be selected by default. When used with a multiple-selection menu, as many options as desired can be selected by default. However, when used with a single-selection menu, the last option which is set as selected will appear as selected when rendered by the browser. If no option is set to be selected in a single-selection menu, the first option in the menu will be selected by default. Usually, this option is left as an empty value for easy detection by server-side scripts of whether or not a user selected anything.

The Syntax for Pre-Selection

<option value="some-text" selected="selected">Some Text</option>

Note: While most browsers will still render the menu correctly by only using selected, it is considered invalid syntax and you should always use the full selected="selected" format when pre-selecting an option. There is no other valid value (such as "none" or "unselected") that can be present inside this attribute.

Grouping Options Together

You can further organize your options into "categories" by using the <optgroup> element, which (as you'd imagine) groups the options within it under a certain title. This title appears in a slightly different style above the group of options it represents, and cannot be selected by the user (only an option can). Also, just because some options are within an option group doesn't mean all options have to be inside one. The title that is used is specified by its label attribute. For example:

<optgroup label="Apples">
    <option value="granny-smith">Granny Smith</option>
    <option value="red-delicious">Red Delicious</option>
</optgroup>
<option value="bananas">Bananas</option>

Browser Support

The <select> tag is supported by all browsers.