select
elementoption
or optgroup
elements.autofocus
disabled
form
multiple
name
required
size
interface HTMLSelectElement : HTMLElement { attribute boolean autofocus; attribute boolean disabled; readonly attribute HTMLFormElement? form; attribute boolean multiple; attribute DOMString name; attribute boolean required; attribute unsigned long size; readonly attribute DOMString type; readonly attribute HTMLOptionsCollection options; attribute unsigned long length; getter Element item(unsigned long index); object namedItem(DOMString name); void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null); void remove(long index); setter creator void (unsigned long index, HTMLOptionElement? option); readonly attribute HTMLCollection selectedOptions; attribute long selectedIndex; attribute DOMString value; readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(DOMString error); readonly attribute NodeList labels; };
The select
element represents a control for
selecting amongst a set of options.
The multiple
attribute is a
boolean attribute. If the attribute
is present, then the select
element represents
a control for selecting zero or more options from the list of options. If the attribute
is absent, then the select
element represents
a control for selecting a single option from the list of options.
The size
attribute gives the
number of options to show to the user. The size
attribute, if specified, must have a
value that is a valid non-negative integer
greater than zero.
The list of options for a
select
element consists of all the
option
element children of the
select
element, and all the
option
element children of all the
optgroup
element children of the
select
element, in tree order.
The required
attribute is a
boolean attribute. When specified,
the user will be required to select a value before submitting the
form.
If a select
element has a required
attribute specified, does not
have a multiple
attribute specified, and has a
display size of 1; and if the
value
of the first option
element in the select
element's list of options (if any) is the
empty string, and that option
element's parent node is the
select
element (and not an optgroup
element), then that
option
is the select
element's placeholder label option.
If a select
element has a required
attribute specified, does not
have a multiple
attribute specified, and has a
display size of 1, then the
select
element must have a placeholder label option.
The form
attribute is used to explicitly associate
the select
element with its form owner. The name
attribute represents the element's name.
The disabled
attribute is used to make the
control non-interactive and to prevent its value from being
submitted. The autofocus
attribute controls focus.
type
Returns "select-multiple
" if the element
has a multiple
attribute, and "select-one
" otherwise.
options
Returns an HTMLOptionsCollection
of
the list of options.
length
[ = value ]Returns the number of elements in the list of options.
When set to a smaller number, truncates the number of
option
elements in the select
.
When set to a greater number, adds new blank option
elements to the select
.
item
(index)Returns the item with index index from the list of options. The items are sorted in tree order.
namedItem
(name)Returns the item with ID or name
name from the
list of options.
If there are multiple matching items, then a NodeList
object containing all those elements is returned.
Returns null if no element with that ID could be found.
add
(element
[, before ])Inserts element before the node given by before.
The before argument can be a number, in which case element is inserted before the item with that number, or an element from the list of options, in which case element is inserted before that element.
If before is omitted, null, or a number out of range, then element will be added at the end of the list.
This method will throw a
HierarchyRequestError
exception if element is an ancestor of the element into which it is to
be inserted.
selectedOptions
Returns an HTMLCollection
of the list of options that are
selected.
selectedIndex
[ = value ]Returns the index of the first selected item, if any, or −1 if there is no selected item.
Can be set, to change the selection.
value
[ = value ]Returns the value of the first selected item, if any, or the empty string if there is no selected item.
Can be set, to change the selection.
The following example shows how a select
element can be used to offer the
user with a set of options from which the user can select a single
option. The default option is preselected.
<p> <label for="unittype">Select unit type:</label> <select id="unittype" name="unittype"> <option value="1"> Miner </option> <option value="2"> Puffer </option> <option value="3" selected> Snipey </option> <option value="4"> Max </option> <option value="5"> Firebot </option> </select> </p>
When there is no default option, a placeholder can be used instead:
<select name="unittype" required> <option value=""> Select unit type </option> <option value="1"> Miner </option> <option value="2"> Puffer </option> <option value="3"> Snipey </option> <option value="4"> Max </option> <option value="5"> Firebot </option> </select>
Here, the user is offered a set of options from which he can select any number. By default, all five options are selected.
<p> <label for="allowedunits">Select unit types to enable on this map:</label> <select id="allowedunits" name="allowedunits" multiple> <option value="1" selected> Miner </option> <option value="2" selected> Puffer </option> <option value="3" selected> Snipey </option> <option value="4" selected> Max </option> <option value="5" selected> Firebot </option> </select> </p>
Sometimes, a user has to select one or more items. This example shows such an interface.
<p>Select the songs from that you would like on your Act II Mix Tape:</p> <select multiple required name="act2"> <option value="s1">It Sucks to Be Me (Reprise) <option value="s2">There is Life Outside Your Apartment <option value="s3">The More You Ruv Someone <option value="s4">Schadenfreude <option value="s5">I Wish I Could Go Back to College <option value="s6">The Money Song <option value="s7">School for Monsters <option value="s8">The Money Song (Reprise) <option value="s9">There's a Fine, Fine Line (Reprise) <option value="s10">What Do You Do With a B.A. in English? (Reprise) <option value="s11">For Now </select>