New pages: HTMLOptionElement properties

files/en-us/web/api/htmloptionelement/defaultselected/index.md

@@ -0,0 +1,38 @@
+---
+title: "HTMLOptionElement: defaultSelected property"
+short-title: defaultSelected
+slug: Web/API/HTMLOptionElement/defaultSelected
+page-type: web-api-instance-property
+browser-compat: api.HTMLOptionElement.defaultSelected
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`defaultSelected`** property of the {{DOMxRef("HTMLOptionElement")}} interface specifies the default selected state of the element. This property reflects the {{htmlelement("option")}} element's [`selected`](/en-US/docs/Web/HTML/Element/option#selected) attribute. The presence of the `selected` attribute sets the `defaultSelected` property to `true`.
+
+## Value
+
+A boolean.
+
+## Examples
+
+```js
+const optionElement = document.getElementById("water");
+console.log(optionElement.defaultSelected);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("option")}}
+- {{DOMxRef("HTMLOptionElement.selected")}}
+- {{DOMxRef("HTMLOptionElement.index")}}
+- {{DOMxRef("HTMLOptionsCollection")}}
+- {{cssxref(":default")}}

files/en-us/web/api/htmloptionelement/disabled/index.md

@@ -0,0 +1,64 @@
+---
+title: "HTMLOptionElement: disabled property"
+short-title: disabled
+slug: Web/API/HTMLOptionElement/disabled
+page-type: web-api-instance-property
+browser-compat: api.HTMLOptionElement.disabled
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`disabled`** property of the {{domxref("HTMLOptionElement")}} is a boolean value that indicates whether the {{htmlelement("option")}} element is unavailable to be selected. The property reflects the value of the [`disabled`](/en-US/docs/Web/HTML/Element/option#disabled) HTML attribute.
+
+The property reflects the value of the `disabled` attribute on the `<option>` element itself. If an option is disabled because it is a child of an {{HTMLElement("optgroup")}} element that is disabled, the `true` of the {{domxref("HTMLOptGroupElement.disabled")}} property is not inherited by the option itself.
+
+## Value
+
+A boolean value.
+
+## Examples
+
+### HTML
+
+```html
+<label for="drink-options">Drink selection:</label>
+<select id="drink-options">
+  <option value="water">Water</option>
+  <option value="lemonade">Lemonade</option>
+  <option value="beer">Beer</option>
+  <option value="whisky" disabled>Whisky</option>
+</option>
+```
+
+### JavaScript
+
+```js
+const drinks = document.querySelectorAll("#drink-options option");
+console.log(drinks[0].disabled); // false
+console.log(drinks[3].disabled); // true
+drinks[1].disabled = true; // disables the beer option
+```
+
+### Result
+
+{{EmbedLiveSample('Examples')}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("option")}}
+- {{HTMLElement("select")}}
+- {{HTMLElement("optgroup")}}
+- {{DOMxRef("HTMLSelectElement.disabled")}}
+- {{DOMxRef("HTMLOptGroupElement.disabled")}}
+- {{DOMxRef("HTMLOptionElement.selected")}}
+- {{DOMxRef("HTMLOptionElement.index")}}
+- {{DOMxRef("HTMLOptionsCollection")}}
+- {{cssxref(":disabled")}}

files/en-us/web/api/htmloptionelement/index.md

@@ -23,13 +23,13 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._
 - {{domxref("HTMLOptionElement.defaultSelected")}}
   - : Has a value of either `true` or `false` that shows the initial value of the [`selected`](/en-US/docs/Web/HTML/Element/option#selected) HTML attribute, indicating whether the option is selected by default or not.
 - {{domxref("HTMLOptionElement.disabled")}}
-  - : Has a value of either `true` or `false` representing the value of the [`disabled`](/en-US/docs/Web/HTML/Element/option#disabled) HTML attribute, which indicates that the option is unavailable to be selected. An option can also be disabled if it is a child of an {{HTMLElement("optgroup")}} element that is disabled.
+  - : Has a value of either `true` or `false` representing the value of the [`disabled`](/en-US/docs/Web/HTML/Element/option#disabled) HTML attribute, which indicates that the option is unavailable to be selected.
 - {{domxref("HTMLOptionElement.form")}} {{ReadOnlyInline}}
   - : A {{domxref("HTMLFormElement")}} representing the same value as the `form` of the corresponding {{HTMLElement("select")}} element, if the option is a descendant of a {{HTMLElement("select")}} element, or null if none is found.
 - {{domxref("HTMLOptionElement.index")}} {{ReadOnlyInline}}
   - : A `long` representing the position of the option within the list of options it belongs to, in tree-order. If the option is not part of a list of options, like when it is part of the {{HTMLElement("datalist")}} element, the value is `0`.
-- {{domxref("HTMLOptionElement.label")}} {{ReadOnlyInline}}
-  - : A string that reflects the value of the [`label`](/en-US/docs/Web/HTML/Element/option#label) HTML attribute, which provides a label for the option. If this attribute isn't specifically set, reading it returns the element's text content.
+- {{domxref("HTMLOptionElement.label")}}
+  - : A string that reflects the value of the [`label`](/en-US/docs/Web/HTML/Element/option#label) HTML attribute, which provides a label for the option. If this attribute isn't specifically set, reading it returns the element's {{domxref("HTMLOptionElement.text", "text")}} content.
 - {{domxref("HTMLOptionElement.selected")}}
   - : Has a value of either `true` or `false` that indicates whether the option is currently selected.
 - {{domxref("HTMLOptionElement.text")}}
@@ -51,5 +51,12 @@ _Doesn't implement any specific method, but inherits methods from its parent, {{
 
 ## See also
 
-- The HTML element implementing this interface: {{HTMLElement("option")}}.
-- The {{domxref("HTMLOptionsCollection")}} interface.
+- {{HTMLElement("option")}}
+- {{HTMLElement("select")}}
+- {{HTMLElement("datalist")}}
+- {{HTMLElement("optgroup")}}
+- {{domxref("HTMLOptionsCollection")}}
+- {{domxref("HTMLSelectElement")}}
+- {{domxref("HTMLOptGroupElement")}}
+- {{domxref("HTMLElement")}}
+- {{domxref("HTMLCollection")}}

files/en-us/web/api/htmloptionelement/index/index.md

@@ -0,0 +1,40 @@
+---
+title: "HTMLOptionElement: index property"
+short-title: index
+slug: Web/API/HTMLOptionElement/index
+page-type: web-api-instance-property
+browser-compat: api.HTMLOptionElement.index
+---
+
+{{APIRef("HTML DOM")}}
+
+The read-only **`index`** property of the {{DOMxRef("HTMLOptionElement")}} interface specifies the 0-based index of the element; that is, the position of the {{HTMLElement("option")}} within the list of options it belongs to, in tree-order, as an integer. If the `<option>` is not part of an option-list, the value is `0`.
+
+## Value
+
+A number.
+
+## Examples
+
+```js
+const optionElement = document.getElementById("myOption");
+console.log(optionElement.index);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("option")}}
+- {{HTMLElement("select")}}
+- {{HTMLElement("datalist")}}
+- {{DOMxRef("HTMLOptionElement.defaultSelected")}}
+- {{DOMxRef("HTMLOptionElement.selected")}}
+- {{DOMxRef("HTMLSelectElement.selectedIndex")}}
+- {{DOMxRef("HTMLOptionsCollection")}}

files/en-us/web/api/htmloptionelement/label/index.md

@@ -0,0 +1,41 @@
+---
+title: "HTMLOptionElement: label property"
+short-title: label
+slug: Web/API/HTMLOptionElement/label
+page-type: web-api-instance-property
+browser-compat: api.HTMLOptionElement.label
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`label`** property of the {{domxref("HTMLOptionElement")}} represents the text displayed for an option in a {{htmlelement("select")}} element or as part of a list of suggestions in a {{htmlelement("datalist")}} element. It reflects the {{htmlelement("option")}} element's [`label`](/en-US/docs/Web/HTML/Element/option#label) attribute.
+
+If the attribute if omitted or the empty string, the `label` property returns the element's {{domxref("HTMLOptionElement.text", "text")}} content.
+
+## Value
+
+A string.
+
+## Example
+
+```js
+const optionElement = document.getElementById("exampleOption");
+console.log(`Option's label: ${optionElement.label}`);
+optionElement.label = "Updated label";
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLOptionElement.value")}}
+- {{domxref("HTMLOptionElement.label")}}
+- {{HTMLElement("select")}}
+- {{HTMLElement("datalist")}}
+- {{HTMLElement("optgroup")}}

files/en-us/web/api/htmloptionelement/selected/index.md

@@ -0,0 +1,41 @@
+---
+title: "HTMLOptionElement: selected property"
+short-title: selected
+slug: Web/API/HTMLOptionElement/selected
+page-type: web-api-instance-property
+browser-compat: api.HTMLOptionElement.selected
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`selected`** property of the {{DOMxRef("HTMLOptionElement")}} interface specifies the current selectedness of the element; that is, whether the {{HTMLElement("option")}} is selected or not.
+
+The presence of the HTML [`selected`](/en-US/docs/Web/HTML/Element/Option#selected) attribute indicates the option is selected by default. It does not indicate whether this option is currently selected: if the option's state changes, the `selected` content attribute does not reflect the change; only the `HTMLOptionElement`'s `selected` IDL property is updated. The `selected` attribute is reflected by the {{domxref("HTMLOptionElement.defaultSelected", "defaultSelected")}} property.
+
+## Value
+
+A boolean.
+
+## Examples
+
+```js
+const optionElement = document.getElementById("water");
+console.log(optionElement.selected);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("option")}}
+- {{HTMLElement("select")}}
+- {{DOMxRef("HTMLOptionElement.defaultSelected")}}
+- {{DOMxRef("HTMLOptionElement.index")}}
+- {{DOMxRef("HTMLOptionsCollection")}}
+- {{DOMxRef("HTMLSelectElement.selectedIndex")}}

files/en-us/web/api/htmloptionelement/text/index.md

@@ -0,0 +1,45 @@
+---
+title: "HTMLOptionElement: text property"
+short-title: text
+slug: Web/API/HTMLOptionElement/text
+page-type: web-api-instance-property
+browser-compat: api.HTMLOptionElement.text
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`text`** property of the {{domxref("HTMLOptionElement")}} represents the text inside the {{htmlelement("option")}} element.
+This property represents the same information as {{domxref("Node.textContent")}}.
+
+> [!NOTE]
+> If the element has a `label`, the text inside the {{htmlelement("option")}} is not visually rendered. In this case, the `text` property can still be used to set the content, but it will have no visible effect.
+
+## Value
+
+A string.
+
+## Example
+
+```js
+const optionElement = document.getElementById("exampleOption");
+console.log(`Text property: ${optionElement.text}`);
+optionElement.text = "Updated text";
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("select")}}
+- {{HTMLElement("datalist")}}
+- {{HTMLElement("optgroup")}}
+- {{domxref("HTMLOptionElement.value")}}
+- {{domxref("HTMLOptionElement.label")}}
+- {{domxref("HTMLScriptElement.text")}}
+- {{domxref("HTMLAnchorElement.text")}}