GeezerVison is showing developer.mozilla.org — HTMLOptionElement: Option() constructor - Web APIs | MDN
HTMLOptionElement: Option() constructor
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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);
});
html <select id="s"></select>
js 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); // Will actually be selected in the view
}
});
Result:
html <select id="s">
<option value="0">zero</option>
<option value="1" selected>one</option>
<option value="2">two</option>
<!-- User will see two as 'selected' -->
</select>
|