The select HTML tag

The select tag allows to select an option from a list. It is supplemented by the HTML 5 menu tag that is more specialized for a context menu or toolbar.

All HTML elements can embed a select but <a> and <button>.

The basic syntax is: 

<select>
  <option></option>
  ...
</select>

We can group options with the optgroup tag: 

<select>
  <optgroup>
    <option></option>
    ...
  </optgroup>
    ...
</select>

The ending tag may be omitted for option and optgroup but it is mandatory to select.

Attributes specific or inherited

Attribute Value Function Version
form ID
ID of the form related to the select tag.
 HTML 5
disabled [disabled]/empty
State disabled or not.
 HTML 5
size Integer
Number of lines displayed, one is the default.
  
multiple [multiple]/empty
Possibility of selecting multiple options together.
  
length Integer
Number of options in the list (read only).
HTML 5
tabindex Integer
For keyboard users, indicates the order in which the tags get the focus. If the select tag has a tabindex="2", when the user will activate the tab key on the page, the select will be available in second.
  
name String
Name to send form data
  

Regarding the attributes disabled, you can just write disabled or disabled="disabled" or disabled="". Similarly for the multiple attribute. This for HTML 5.

If multiple options are selected, the multiple attribute should be present.

Example of use

This corresponds to the following code: 

<select size="6" >
    <optgroup label="groupe1">
        <option>Alpha</option>
        <option>Beta</option>
    </optgroup>
    <optgroup label="groupe2">
        <option>One</option>
        <option>Two</option>
    </optgroup>
</select>

Using select in JavaScript

We can access a select tag and know which option was chosen in JavaScript.
The demo gives a value and content to the options. It is the content that is displayed.
This is useful in cases where the values used by the script are different than what is displayed.

When you select an option, a warning message appears which displays the index and the associated value.

HTML code

<select name="select" onchange="updated(this)">
    <option value="1">apple</option>
    <option value="2">orange</option>
    <option value="3">cherry</option>
</select>

JavaScript code

function updated(element)
{
    var idx=element.selectedIndex;
    var val=element.options[idx].value;
    var content=element.options[idx].innerHTML;
    alert(val + " " + content);
 }

selectedIndex is a read-only attribute that indicates the position of the selected item.

Beyond select

The select element has been kept in HTML 5, but new tags were created to better respond to different situations.
The menu item contains a list of options that are <li> tags but it is not implemented.
More interestingly, the MVC (Model View Controller) is added which separates the presentation from data, with the datalist tag, a list that is associated to different elements such as range, while they are separated in the body of the page.
We can then more easily dynamically generate lists.

© 2010-2012 Xul.fr