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

La interfaz **`HTMLSelectElement`** representa un elemento HTML `<select>`. Estos elementos también comparten todas las propiedades y métodos de otros elementos HTML a través de la interfaz `HTMLElement`.

EventTarget

Node

Element

HTMLElement

HTMLSelectElementPropiedades de instancia
------------------------

*Esta interfaz hereda las propiedades de `HTMLElement`, `Element` y `Node`.*

`HTMLSelectElement.autofocus` (en-US)

Un valor booleano que refleja el atributo HTML `autofocus`, que indica si el control debe tener el foco de entrada cuando se carga la página, a menos que el usuario lo anule, por ejemplo escribiendo en un control diferente. Solo un elemento asociado a un formulario en un documento puede tener este atributo especificado.

`HTMLSelectElement.disabled` (en-US)

Un valor booleano que refleja el atributo HTML `disabled`, que indica si el control está deshabilitado. Si está deshabilitado, no acepta clics.

`HTMLSelectElement.form` (en-US) Read only 

Un `HTMLFormElement` que hace referencia al formulario al que está asociado este elemento. Si el elemento no está asociado con un elemento `<form>`, entonces devuelve `null`.

`HTMLSelectElement.labels` (en-US) Read only 

Un `NodeList` de elementos `<label>` asociados con el elemento.

`HTMLSelectElement.length`

Un `unsigned long` con el número de elementos `<option>` en este elemento `select`.

`HTMLSelectElement.multiple`

Un valor booleano que refleja el atributo HTML `multiple`, que indica si se pueden seleccionar varios elementos.

`HTMLSelectElement.name`

Una cadena que refleja el atributo HTML `name`, que contiene el nombre de este control utilizado por los servidores y las funciones de búsqueda DOM.

`HTMLSelectElement.options` (en-US) Read only 

Un `HTMLOptionsCollection` (en-US) que representa el conjunto de elementos `<option>` (`HTMLOptionElement` (en-US)) contenidos en este elemento.

`HTMLSelectElement.required`

Un valor booleano que refleja el atributo HTML `required`, que indica si el usuario debe seleccionar un valor antes de enviar el formulario.

`HTMLSelectElement.selectedIndex` (en-US)

Un `long` que refleja el índice del primer elemento `<option>` seleccionado. El valor `-1` indica que no se ha seleccionado ningún elemento.

`HTMLSelectElement.selectedOptions` (en-US) Read only 

Un `HTMLCollection` que representa el conjunto de elementos `<option>` seleccionados.

`HTMLSelectElement.size`

Un `long` que refleja el atributo HTML `size`, que contiene el número de elementos visibles en el control. El valor predeterminado es 1, a menos que `multiple` sea `true`, en cuyo caso es 4.

`HTMLSelectElement.type` (en-US) Read only 

Una cadena que representa el tipo del control de formulario. Cuando `multiple` es `true`, devuelve `"select-multiple"`; de lo contrario, devuelve `"select-one"`.

`HTMLSelectElement.validationMessage` Read only 

Una cadena que representa un mensaje traducido que describe las restricciones de validación que el control no cumple (si las hay). Este atributo es la cadena vacía si el control no es candidato para la validación de restricciones (`willValidate` es falso) o si cumple sus restricciones.

`HTMLSelectElement.validity` Read only 

Un `ValidityState` (en-US) que refleja el estado de validez en el que se encuentra este control.

`HTMLSelectElement.value`

Una cadena que refleja el valor del control de formulario. Devuelve la propiedad `value` del primer elemento de opción seleccionado, si lo hay; de lo contrario, la cadena vacía.

`HTMLSelectElement.willValidate` Read only 

Un valor booleano que indica si el botón es candidato para la validación de restricciones. Es `falso` si alguna condición le impide la validación de restricciones.

Métodos de instancia
--------------------

*Esta interfaz hereda los métodos de `HTMLElement`, `Element` y `Node`.*

`HTMLSelectElement.add()` (en-US)

Agrega un elemento a la colección de elementos `option` para este elemento `select`.

`HTMLSelectElement.blur()` 
Obsoleto

Elimina el foco de entrada de este elemento. *Este método ahora está implementado en `HTMLElement`*.

`HTMLSelectElement.checkValidity()`

Comprueba si el elemento tiene restricciones y si las cumple. Si el elemento falla en sus restricciones, el navegador activa un evento cancelable `invalid` en el elemento (y devuelve `false`).

`HTMLSelectElement.focus()` 
Obsoleto

Da foco de entrada a este elemento. *Este método ahora está implementado en `HTMLElement`*.

`HTMLSelectElement.item()` (en-US)

Obtiene un elemento de la colección de opciones para este elemento `<select>`. También puede acceder a un elemento especificando el índice entre corchetes o paréntesis estilo matriz, sin llamar a este método explícitamente.

`HTMLSelectElement.namedItem()` (en-US)

Obtiene el elemento de la colección de opciones con el nombre especificado. La cadena de nombre puede coincidir con el atributo `id` o `name` de un nodo de opción. También puede acceder a un elemento especificando el nombre entre corchetes o paréntesis estilo matriz, sin llamar a este método explícitamente.

`HTMLSelectElement.remove()` (en-US)

Elimina el elemento en el índice especificado de la colección de opciones para este elemento `select`.

`HTMLSelectElement.reportValidity()`

Este método informa al usuario de los problemas con las restricciones del elemento, si las hay. Si hay problemas, activa un evento cancelable `invalid` en el elemento y devuelve `false`; si no hay problemas, devuelve `verdadero`.

`HTMLSelectElement.setCustomValidity()`

Establece el mensaje de validación personalizado para el elemento de selección en el mensaje especificado. Utilice la cadena vacía para indicar que el elemento *no* tiene un error de validación personalizado.

Eventos
-------

Detecte estos eventos usando `addEventListener()` o asignando un detector de eventos a la propiedad `oneventname` de esta interfaz:

Evento `change`

Se activa cuando el usuario selecciona una opción.

Evento `input`

Se activa cuando se modifica `value` de un elemento `<input>`, `<select>` o `<textarea>`.

Ejemplo
-------

### Obtener información sobre la opción seleccionada


```js
/\* asumiendo que tenemos el siguiente HTML
<select id='s'>
 <option>Primero</option>
 <option selected>Segundo</option>
 <option>Tercero</option>
</select>
\*/

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

// devolver el índice de la opción seleccionada
console.log(select.selectedIndex); // 1

// devolver el valor de la opción seleccionada
console.log(select.options[select.selectedIndex].value); // Segundo
```


Una mejor forma de realizar un seguimiento de los cambios en la selección del usuario es observar si se produce el evento `change` en `<select>`. Esto le indicará cuándo cambia el valor y luego podrá actualizar cualquier cosa que necesite. Ver el ejemplo proporcionado en la documentación del evento `change` para más detalles.

Especificaciones
----------------

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

Compatibilidad con navegadores
------------------------------

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

Véase también
-------------

* El elemento HTML `<select>`, que implementa esta interfaz.