HTMLSelectElement
=================

The **`HTMLSelectElement`** interface represents a `<select>` HTML Element. These elements also share all of the properties and methods of other HTML elements via the `HTMLElement` interface.

EventTarget

Node

Element

HTMLElement

HTMLSelectElementInstance properties
-------------------

*This interface inherits the properties of `HTMLElement`, and of `Element` and `Node`.*

`HTMLSelectElement.disabled`

A boolean value reflecting the `disabled` HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.

`HTMLSelectElement.form` Read only 

An `HTMLFormElement` referencing the form that this element is associated with. If the element is not associated with of a `<form>` element, then it returns `null`.

`HTMLSelectElement.labels` Read only 

A `NodeList` of `<label>` elements associated with the element.

`HTMLSelectElement.length`

An `unsigned long` The number of `<option>` elements in this `select` element.

`HTMLSelectElement.multiple`

A boolean value reflecting the `multiple` HTML attribute, which indicates whether multiple items can be selected.

`HTMLSelectElement.name`

A string reflecting the `name` HTML attribute, containing the name of this control used by servers and DOM search functions.

`HTMLSelectElement.options` Read only 

An `HTMLOptionsCollection` representing the set of `<option>` (`HTMLOptionElement`) elements contained by this element.

`HTMLSelectElement.required`

A boolean value reflecting the `required` HTML attribute, which indicates whether the user is required to select a value before submitting the form.

`HTMLSelectElement.selectedIndex`

A `long` reflecting the index of the first selected `<option>` element. The value `-1` indicates no element is selected.

`HTMLSelectElement.selectedOptions` Read only 

An `HTMLCollection` representing the set of `<option>` elements that are selected.

`HTMLSelectElement.size`

A `long` reflecting the `size` HTML attribute, which contains the number of visible items in the control. The default is 1, unless `multiple` is `true`, in which case it is 4.

`HTMLSelectElement.type` Read only 

A string representing the form control's type. When `multiple` is `true`, it returns `"select-multiple"`; otherwise, it returns `"select-one"`.

`HTMLSelectElement.validationMessage` Read only 

A string representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (`willValidate` is false), or it satisfies its constraints.

`HTMLSelectElement.validity` Read only 

A `ValidityState` reflecting the validity state that this control is in.

`HTMLSelectElement.value`

A string reflecting the value of the form control. Returns the `value` property of the first selected option element if there is one, otherwise the empty string.

`HTMLSelectElement.willValidate` Read only 

A boolean value that indicates whether the button is a candidate for constraint validation. It is `false` if any conditions bar it from constraint validation.

Instance methods
----------------

*This interface inherits the methods of `HTMLElement`, and of `Element` and `Node`.*

`HTMLSelectElement.add()`

Adds an element to the collection of `option` elements for this `select` element.

`HTMLSelectElement.checkValidity()`

Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable `invalid` event at the element (and returns `false`).

`HTMLSelectElement.item()`

Gets an item from the options collection for this `<select>` element. You can also access an item by specifying the index in square brackets or parentheses, without calling this method explicitly.

`HTMLSelectElement.namedItem()`

Gets the item in the options collection with the specified name. The name string can match either the `id` or the `name` attribute of an option node. You can also access an item by specifying the name in square brackets or parentheses, without calling this method explicitly.

`HTMLSelectElement.remove()`

Removes the element at the specified index from the options collection for this `select` element.

`HTMLSelectElement.reportValidity()`

This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable `invalid` event at the element, and returns `false`; if there are no problems, it returns `true`.

`HTMLSelectElement.setCustomValidity()`

Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does *not* have a custom validity error.

`showPicker()`

Shows the option picker.

Events
------

*This interface inherits the events of `HTMLElement`, and of `Element` and `Node`.*

Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface:

`change` event

Fires when the user selects an option.

`input` event

Fires when the `value` of an `<input>`, `<select>`, or `<textarea>` element has been changed.

Example
-------

### Get information about the selected option


```js
/\* assuming we have the following HTML
<select id='s'>
 <option>First</option>
 <option selected>Second</option>
 <option>Third</option>
</select>
\*/

const select = document.getElementById("s");

// return the index of the selected option
console.log(select.selectedIndex); // 1

// return the value of the selected option
console.log(select.options[select.selectedIndex].value); // Second
```


A better way to track changes to the user's selection is to watch for the `change` event to occur on the `<select>`. This will tell you when the value changes, and you can then update anything you need to. See the example provided in the documentation for the `change` event for details.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # htmlselectelement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `<select>` HTML element, which implements this interface.