The Option()
constructor creates a new HTMLOptionElement
.
The Option()
constructor creates a new HTMLOptionElement
.
js
new Option() new Option(text) new Option(text, value) new Option(text, value, defaultSelected) new Option(text, value, defaultSelected, selected)
text
Optional
A string representing the content of the element, i.e. the displayed text. If this is not specified, a default value of "" (empty string) is used.
value
Optional
A string representing the value of the HTMLOptionElement
, 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.
defaultSelected
Optional
A value of either true
or false
that sets the selected
attribute 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.
selected
Optional
A value of either true
or false
that 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.
js
/* assuming we have the following HTML <select id='s'> </select> */ const s = document.getElementById("s"); const options = [Four, Five, Six]; options.forEach((element, key) => { s[key] = new Option(element, key); });
js
/* assuming we have the following HTML <select id="s"> <option>First</option> <option>Second</option> <option>Third</option> </select> */ const s = document.getElementById("s"); const options = ["zero", "one", "two"]; options.forEach((element, key) => { if (element === "zero") { s[key] = new Option(element, s.options.length, false, false); } if (element === "one") { s[key] = new Option(element, s.options.length, true, false); // Will add the "selected" attribute } if (element === "two") { s[key] = 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> */
Specification |
---|
HTML Standard # dom-option-dev |
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.5Before Internet Explorer 9, theouterHTML of elements lose their text when constructing with new Option() . |
≤12.1 | 1.2 | 4.4 | 18 | 4 | ≤12.1 | 1 | 1.0 |
© 2005–2023 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