SelectElement Interface
DOM 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 (or
HTML 4 HTMLSelectElement).
Extends
Methods
Code void add(Element element, Element before) #
Adds an element to the collection of option
elements for this select
element.
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> */
void add(Element element, Element before);
Code bool 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).
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.
bool checkValidity();
Code Node item(int index) #
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.
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.
Node item(int index);
Code Node namedItem(String name) #
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.
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.
Node namedItem(String name);
Code void setCustomValidity(String error) #
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.
Parameters
error
- The string to use for the custom validity message.
void setCustomValidity(String error);
Fields
Code bool autofocus #
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
Requires Gecko 2.0
bool autofocus;
Code final FormElement form #
final FormElement form;
Code final NodeList labels #
final NodeList labels;
Code final HTMLOptionsCollection options #
Code final HTMLCollection selectedOptions #
Code final String type #
select-multiple
; otherwise, it returns select-one
.Read only.
final String type;
Code final String validationMessage #
final String validationMessage;
Code final ValidityState validity #
Code String value #
String value;
This page includes content from the Mozilla Foundation that is graciously licensed under a Creative Commons: Attribution-Sharealike license. Mozilla has no other association with Dart or dartlang.org. We encourage you to improve the web by contributing to The Mozilla Developer Network.