HTMLSelectElement

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.

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.

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>.

/* 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.

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