Option()
The Option() constructor creates a new HTMLOptionElement.
Syntax
var optionElementReference = new Option(text, value, defaultSelected, selected);
Parameters
-
textOptional -
A
DOMStringrepresenting the content of the element, i.e. the displayed text. If this is not specified, a default value of "" (empty string) is used. -
valueOptional -
A
DOMStringrepresenting the value of theHTMLOptionElement, i.e. the value attribute of the equivalent<option>. If this is not specified, the value of text is used as the value, e.g. for the associated<select>element's value when the form is submitted to the server. -
defaultSelectedOptional -
A value of either
trueorfalsethat sets theselectedattribute value, i.e. so that this<option>will be the default value selected in the<select>element when the page is first loaded. If this is not specified, a default value of false is used. Note that a value of true does not set the option to selected if it is not already selected. -
selectedOptional -
A value of either
trueorfalsethat sets the option's selected state; the default is false (not selected). If omitted, even if the defaultSelected argument is true, the option is not selected.
Examples
Just add new options
/* assuming we have the following HTML <select id='s'> </select> */ var s = document.getElementById('s'); var options = [Four, Five, Six]; options.forEach(function(element,key) { s[key] = new Option(element,key); });
Append options with different parameters
/* assuming we have the following HTML <select id="s"> <option>First</option> <option>Second</option> <option>Third</option> </select> */ var s = document.getElementById('s'); var options = [ 'zero', 'one', 'two' ]; options.forEach(function(element, key) { if (element == 'zero') { s[s.options.length] = new Option(element, s.options.length, false, false); } if (element == 'one') { s[s.options.length] = new Option(element, s.options.length, true, false); // Will add the "selected" attribute } if (element == 'two') { s[s.options.length] = new Option(element, s.options.length, false, true); // Just will be selected in "view" } }); /* Result <select id="s"> <option value="0">zero</option> <option value="1" selected="">one</option> <option value="2">two</option> // User will see this as 'selected' </select> */
Specifications
| Specification |
|---|
| HTML Standard (HTML) # dom-option-dev |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
Option |
1 |
12 |
1 |
5.5 |
≤12.1 |
1.2 |
1 |
18 |
4 |
≤12.1 |
1 |
1.0 |
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option