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 multiple
,
required
, and
size
IDL attributes
must reflect the respective content attributes of the
same name. The size
IDL
attribute has a default value of zero.
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>