-
Notifications
You must be signed in to change notification settings - Fork 22.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New pages: HTMLOptionElement properties (#35909)
* New pages: HTMLOptionElement properties * New pages: HTMLOptionElement properties * New pages: HTMLOptionElement properties * New pages: HTMLOptionElement properties * Apply suggestions from code review Co-authored-by: Joshua Chen <[email protected]> --------- Co-authored-by: Joshua Chen <[email protected]>
- Loading branch information
Showing
7 changed files
with
281 additions
and
5 deletions.
There are no files selected for viewing
38 changes: 38 additions & 0 deletions
38
files/en-us/web/api/htmloptionelement/defaultselected/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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")}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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")}} |