HTMLSelectElement

« HTMLSelectElement

HTML <select> elements share all of the properties and methods of other HTML elements described in the element section. They also have the specialized interface HTMLSelectElement.

Method overview

void add(in nsIDOMHTMLElement element, [optional] in nsIDOMHTMLElement before)
void add(in nsIDOMHTMLElement element, in long before) HTML5
void blur(); HTML 4 Obsolete since HTML5 Obsolete since Gecko 5.0
boolean checkValidity(); HTML5
void focus(); HTML 4 Obsolete since HTML5 Obsolete since Gecko 5.0
nsIDOMNode item(in unsigned long index); HTML5
nsIDOMNode namedItem(in DOMString name); HTML5
void remove(in long index);
void setCustomValidity(in DOMString error); HTML5

Properties

Name Type Description
autofocus boolean Reflects the autofocus HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. HTML5
disabled boolean Reflects the disabled HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.
form nsIDOMHTMLFormElement The form that this element is associated with. If this element is a descendant of a form element, then this attribute is the ID of that form element. If the element is not a descendant of a form element, then:
  • HTML5 The attribute can be the ID of any form element in the same document.
  • HTML 4 The attribute is null.
Read only.
labels Unimplemented (see bug 556743) NodeList A list of label elements associated with this select element.
length unsigned long The number of <option> elements in this select element.
multiple boolean Reflects the multiple HTML attribute, whichindicates whether multiple items can be selected.
name DOMString Reflects the name HTML attribute, containing the name of this control used by servers and DOM search functions.
options nsIDOMHTMLOptionsCollection The set of <option> elements contained by this element. Read only.
required boolean Reflects the required HTML attribute, which indicates whether the user is required to select a value before submitting the form. HTML5
selectedIndex long The index of the first selected <option> element. The value -1 is returned if no element is selected.
selectedOptions HTMLCollection The set of options that are selected. HTML5
size long Reflects the size HTML attribute, which contains the number of visible items in the control. The default is 1, HTML5 unless multiple is true, in which case it is 4.
tabIndex long The element's position in the tabbing order. HTML 4 Obsolete since HTML5
type DOMString The form control's type. When multiple is true, it returns select-multiple; otherwise, it returns select-one.Read only.
validationMessage DOMString A localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints.Read only. HTML5
validity nsIDOMValidityState The validity states that this control is in. Read only. HTML5
value DOMString The value of this form control, that is, of the first selected option.
willValidate boolean Indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation. Read only. HTML5

Methods

While DOM manipulation methods, such as add() and remove() can be used to modify the collection as child node objects of the select object, this is not guaranteed to be supported by all browser platforms.

add()

Adds an element to the collection of option elements for this select element.

void add(
  in nsIDOMHTMLElement element,
  in nsIDOMHTMLElement before Optional from Gecko 7.0
);
void add(
  in HTMLElement element,
  in long before Optional from Gecko 7.0
);
Parameters
element
An item to add to the collection of options.
before Optional from Gecko 7.0
An item (or HTML5 index of an item) that the new item should be inserted before. If this parameter is null (or the index does not exist), the new element is appended to the end of the collection.
Examples
Creating Elements from Scratch
var sel = document.createElement("select");
var opt1 = document.createElement("option");
var opt2 = document.createElement("option");

opt1.value = "1";
opt1.text = "Option: Value 1";

opt2.value = "2";
opt2.text = "Option: Value 2";

sel.add(opt1, null);
sel.add(opt2, null);

/*
  Produces the following, conceptually:

  <select>
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>
*/

From HTML5 and Gecko 7.0 the before parameter is optional. So the following is accepted.

...
sel.add(opt1);
sel.add(opt2);
...
Append to an Existing Collection
var sel = document.getElementById("existingList");

var opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, null);

/*
  Takes the existing following select object:

  <select id="existingList" name="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>

  And changes it to:

  <select id="existingList" name="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
    <option value="3">Option: Value 3</option>
  </select>
*/

From HTML5 and Gecko 7.0 the before parameter is optional. So the following is accepted.

...
sel.add(opt);
...
Inserting to an Existing Collection
var sel = document.getElementById("existingList");

var opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, sel.options[1]);

/*
  Takes the existing following select object:

  <select id="existingList" name="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>

  And changes it to:

  <select id="existingList" name="existingList">
    <option value="1">Option: Value 1</option>
    <option value="3">Option: Value 3</option>
    <option value="2">Option: Value 2</option>
  </select>
*/
 

Obsolete since Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

blur()

HTML 4 Removes input focus from this element. Obsolete since HTML5

void blur();
Parameters

None.

Requires Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

checkValidity()

HTML5 Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at the element (and returns false).

boolean checkValidity();
Parameters

None.

Return value

A false value if the select element is a candidate for constraint evaluation and it does not satisfy its constraints. Returns true if the element is not constrained, or if it satisfies its constraints.

Obsolete since Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

focus()

HTML 4 Gives input focus to this element. Obsolete since HTML5

void focus();
Parameters

None.

Requires Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

item()

HTML5 Gets an item from the options collection for this select element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.

nsIDOMNode item(
  in unsigned long index
);
Parameters
index
The zero-based index into the collection of the option to get.
Return value

The node at the specified index, or null if such a node does not exist in the collection.

Requires Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

namedItem()

HTML5 Gets the item in the options collection with the specified name. The name string can match either the id or the name attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.

nsIDOMNode namedItem(
  in DOMString name
);
Parameters
name
The name of the option to get.
Return value
  • A node, if there is exactly one match.
  • null if there are no matches.
  • A NodeList in tree order of nodes whose name or id attributes match the specified name.

remove()

Removes the element at the specified index from the options collection for this select element.

void remove(
  in long index
);
Parameters
index
The zero-based index of the option element to remove from the collection.
Example
var sel = document.getElementById("existingList");
sel.remove(1);

/*
  Takes the existing following select object:

  <select id="existingList" name="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
    <option value="3">Option: Value 3</option>
  </select>

  And changes it to:

  <select id="existingList" name="existingList">
    <option value="1">Option: Value 1</option>
    <option value="3">Option: Value 3</option>
  </select>
*/
 

Requires Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

setCustomValidity()

HTML5 only. Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.

void setCustomValidity(
  in DOMString error
);
Parameters
error
The string to use for the custom validity message.

Example

Get information about the selected option

/* assuming we have the following HTML
<select id='s'>
    <option>First</option>
    <option selected>Second</option>
    <option>Third</option>
</select>
*/

var select = document.getElementById('s');

// return the index of the selected option
alert(select.selectedIndex)// 1

// return the value of the selected option
alert(select.options[select.selectedIndex].value) // Second