select
Summary
The select element is used to create a drop-down list. Used with option tags inside the select element to define the available options in the list.
Overview Table
Attributes
autofocus= boolean
Allows the author to indicate that a control is to be focused as soon as the page is loadeddisabled= boolean
If present, make the control non-interactive and to prevent its value from being submitted.form= the ID of a form element in the element’s owner
Associate the select element with its form owner.
By default, the select element is associated with its nearest ancestor form element.multiple= boolean
If the attribute is present, then the select element represents a control for selecting zero or more options from the list of options. [Example B]name= unique name
Represents the element’s name.required= boolean
When specified, the user will be required to select a value before submitting the form.size= valid non-negative intege
Gives the number of options to show to the user.
If the multiple attribute is present, then the size attribute’s default value is 4. If the multiple attribute is absent, then the size attribute’s default value is 1.
Internationalization
Internationalization topics related to the select element:
- Linking to localized content
- Working with form controls (specifically sorting of select options)
Examples
This example uses the SELECT element to create a drop-down list box.
<select name="Cats" size="1">
<option value="1">Calico</option>
<option value="2">Tortie</option>
<option value="3" selected="">Siamese</option>
</select>
This example uses the select element to create a multi-select list box by setting the SIZE and MULTIPLE attributes. To retrieve the selected options for a multi-select list box, iterate through the options collection and check to see where SELECTED is set to true.
<select id="select-element" name="cars" size="3" multiple="">
<option value="1" selected="">BMW</option>
<option value="2">Porsche</option>
<option value="3" selected="">Mercedes</option>
</select>
This JavaScript example adds a new option to the end of the SELECT list created above. The Option constructor can also be used in JavaScript.
var option = document.createElement("OPTION");
option.text="Ferrari";
option.value="4";
document.getElementById("select-element").add(option);
Notes
In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a select will not be displayed if a background, border, or border-radius style is applied to the select.
Firefox for Android, by default, sets a background-image gradient on all <select multiple> elements. This can be disabled using background-image: none.
Related specifications
Attributions
Microsoft Developer Network: [Windows Internet Explorer API reference Article]