Skip to content

Commit

Permalink
New pages: HTMLSelectElement properties (#35876)
Browse files Browse the repository at this point in the history
* New pages: HTMLSelectElement properties

* missing quote
  • Loading branch information
estelle authored Sep 13, 2024
1 parent 8cf200c commit 92d955a
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 0 deletions.
39 changes: 39 additions & 0 deletions files/en-us/web/api/htmlselectelement/length/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
title: "HTMLSelectElement: length property"
short-title: length
slug: Web/API/HTMLSelectElement/length
page-type: web-api-instance-property
browser-compat: api.HTMLSelectElement.length
---

{{ APIRef("HTML DOM") }}

The **`length`** property of the {{DOMxRef("HTMLSelectElement")}} interface specifies the number of {{htmlelement("option")}} elements in the {{htmlelement("select")}} element. It represents the number of nodes in the {{DOMxRef("HTMLSelectElement.options", "options")}} collection. On setting, it acts as ({{DOMxRef("HTMLOptionsCollection.length")}}).

## Value

A number.

## Examples

```js
const selectElement = document.getElementById("fruits");
console.log(selectElement.length);
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("select")}}
- {{HTMLElement("option")}}
- {{DOMXref("HTMLSelectElement.options")}}
- {{DOMXref("HTMLSelectElement.selectedOptions")}}
- {{DOMXref("HTMLSelectElement.multiple")}}
- {{DOMXref("HTMLSelectElement.selectedIndex")}}
37 changes: 37 additions & 0 deletions files/en-us/web/api/htmlselectelement/multiple/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
title: "HTMLSelectElement: multiple property"
short-title: multiple
slug: Web/API/HTMLSelectElement/multiple
page-type: web-api-instance-property
browser-compat: api.HTMLSelectElement.multiple
---

{{ APIRef("HTML DOM") }}

The **`multiple`** property of the {{DOMxRef("HTMLSelectElement")}} interface specifies that the user may select more than one option from the list of options. It reflects the {{htmlelement("select")}} element's [`multiple`](/en-US/docs/Web/HTML/Element/select#multiple) attribute.

## Value

A boolean.

## Examples

```js
const selectElement = document.getElementById("comment");
console.log(selectElement.multiple);
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("select")}}
- {{DOMXref("HTMLSelectElement.selectedOptions")}}
- {{DOMXref("HTMLSelectElement.length")}}
- {{DOMXref("HTMLSelectElement.selectedIndex")}}
36 changes: 36 additions & 0 deletions files/en-us/web/api/htmlselectelement/required/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: "HTMLSelectElement: required property"
short-title: required
slug: Web/API/HTMLSelectElement/required
page-type: web-api-instance-property
browser-compat: api.HTMLSelectElement.required
---

{{ APIRef("HTML DOM") }}

The **`required`** property of the {{DOMxRef("HTMLSelectElement")}} interface specifies that the user must select an option with a non-empty string value before submitting a form. It reflects the {{htmlelement("select")}} element's [`required`](/en-US/docs/Web/HTML/Element/select#required) attribute.

## Value

A boolean.

## Examples

```js
const selectElement = document.getElementById("fruits");
console.log(selectElement.required);
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("select")}}
- {{DOMXref("HTMLSelectElement.validity")}}
- {{cssxref(":required")}} pseudo-class
40 changes: 40 additions & 0 deletions files/en-us/web/api/htmlselectelement/size/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: "HTMLSelectElement: size property"
short-title: size
slug: Web/API/HTMLSelectElement/size
page-type: web-api-instance-property
browser-compat: api.HTMLSelectElement.size
---

{{ APIRef("HTML DOM") }}

The **`size`** property of the {{DOMxRef("HTMLSelectElement")}} interface specifies the number of options, or rows, that should be visible at one time. It reflects the {{htmlelement("select")}} element's [`size`](/en-US/docs/Web/HTML/Element/select#size) attribute. If omitted, the value is `0`.

> [!NOTE]
> While by default a `<select>` displays a single row unless {{DOMxRef("HTMLSelectElement.multiple", "multiple")}} is true, in which case four rows are displayed, the default value for the `size` property is `0`.
## Value

A number.

## Examples

```js
const selectElement = document.getElementById("fruits");
console.log(selectElement.size);
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{HTMLElement("select")}}
- {{HTMLElement("options")}}
- {{DOMXref("HTMLSelectElement.selectedOptions")}}
- {{DOMXref("HTMLSelectElement.length")}}

0 comments on commit 92d955a

Please sign in to comment.