HTMLSelectElement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/es/web/api/html_dom_api/index.md)
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
.
Propiedades de instancia
Esta interfaz hereda las propiedades de HTMLElement
, Element
y Node
.
HTMLSelectElement.autofocus
-
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
-
Un valor booleano que refleja el atributo HTML
disabled
, que indica si el control está deshabilitado. Si está deshabilitado, no acepta clics. HTMLSelectElement.form
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 devuelvenull
. HTMLSelectElement.labels
Read onlyHTMLSelectElement.length
-
Un
unsigned long
con el número de elementos<option>
en este elementoselect
. 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
Read only-
Un
HTMLOptionsCollection
que representa el conjunto de elementos<option>
(HTMLOptionElement
) 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
-
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
Read only-
Un
HTMLCollection
que representa el conjunto de elementos<option>
seleccionados. HTMLSelectElement.size
-
Un
long
que refleja el atributo HTMLsize
, que contiene el número de elementos visibles en el control. El valor predeterminado es 1, a menos quemultiple
seatrue
, en cuyo caso es 4. HTMLSelectElement.type
Read only-
Una cadena que representa el tipo del control de formulario. Cuando
multiple
estrue
, 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
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()
-
Agrega un elemento a la colección de elementos
option
para este elementoselect
. 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 devuelvefalse
). HTMLSelectElement.focus()
Obsoleto-
Da foco de entrada a este elemento. Este método ahora está implementado en
HTMLElement
. HTMLSelectElement.item()
-
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()
-
Obtiene el elemento de la colección de opciones con el nombre especificado. La cadena de nombre puede coincidir con el atributo
id
oname
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()
-
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 devuelvefalse
; si no hay problemas, devuelveverdadero
. 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
/* 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
Véase también
- El elemento HTML
<select>
, que implementa esta interfaz.