JavaScript select Element | Mark's Trackside

Resumen: En este tutorial, aprenderá a manejar el elemento <select> en JavaScript.

Introducción al elemento HTML select elements

a <select> le proporciona una lista de opciones. Permite seleccionar una o varias opciones.

Para formar un <select> elemento, se utiliza la etiqueta <select> y <option> elementos., Por ejemplo:

arriba <select> elemento le permite seleccionar una única opción en un momento.

Si desea selecciones múltiples, usted puede agregar multiple atributo <select> elemento de la siguiente manera:

El HTMLSelectElement tipo de

Para interactuar con la etiqueta <select> elemento en JavaScript, utiliza la etiqueta HTMLSelectElement tipo.,

el tipoHTMLSelectElement tiene las siguientes propiedades útiles:

selectedIndex – devuelve el índice basado en cero de la opción seleccionada. El selectedIndex es -1 si no se selecciona ninguna opción. Si el <select> elemento que permite selecciones múltiples, el selectedIndex devuelve el value de la primera opción.,
value – devuelve la propiedad value del primer elemento option seleccionado si hay uno, de lo contrario devuelve una cadena vacía.
multiple devuelve true si <select> elemento que permite selecciones múltiples. Es equivalente al atributo multiple.

La propiedad selectedIndex

Para seleccionar <select> elemento, se utiliza la API del DOM como getElementById() o querySelector().,

el siguiente ejemplo ilustra cómo obtener el índice de la opción seleccionada:

Cómo funciona:

Primero, seleccione los elementos<button>y<select>f043ca62ae»>

method.

Luego, adjunte un detector de eventos de clic al botón y muestre el índice seleccionado utilizando el método alert() cuando se haga clic en el botón.,

la propiedad de valor

el elemento value la propiedad del elemento <select> depende del elemento <option> y su atributo HTML multiple:

si no se selecciona ninguna opción, la propiedad value del cuadro de selección es una cadena vacía.
si se selecciona una opción y tiene un atributo value, la propiedad value del cuadro de selección es el valor de la opción seleccionada.,
si se selecciona una opción y no tiene el atributo value, la propiedad value del cuadro de selección es el texto de la opción seleccionada.
si se seleccionan varias opciones, la propiedad value del cuadro de selección se deriva de la primera opción seleccionada en función de las dos reglas anteriores.

Consulte el siguiente ejemplo:

En este ejemplo:

Si selecciona la primera opción, el value propiedad de la etiqueta <select> está vacío.,
Si selecciona la última opción, la propiedad value del cuadro de selección es Ember.jsporque la opción seleccionada no tiene el atributo value.
Si selecciona la segunda o tercera opción, la propiedad de valor será "1"o "2".

El tipo HTMLOptionElement

en JavaScript, el tipo HTMLOptionElement representa el elemento <option>.,

el tipo HTMLOptionElement tiene las siguientes propiedades útiles:

index – el índice de la opción dentro de la colección de opciones.
selected devuelve true cuando la opción está seleccionada. Establezca esta propiedad en true para seleccionar una opción.
text
value

luego puede acceder a text y value de la opción seleccionada a través de text y value propiedades:


Code language: JavaScript (javascript)

si un elemento <select> permite múltiples selecciones, puede usar la propiedad selected para determinar qué opciones están seleccionadas:

en este ejemplo, elsb.optionses un objeto similar a una matriz, por lo que no tiene los métodosfilter()como un objetoArray.,

para tomar prestados estos métodos del objeto Array, utilice el método call(). Por ejemplo, lo siguiente devuelve una matriz de opciones seleccionadas:


Code language: PHP (php)

y para obtener la propiedad text de las opciones, encadena el resultado del método filter() con el método map() método, como este:


Code language: JavaScript (javascript)

summary

El elemento <select> le permite seleccionar una o varias opciones., Agregue el atributo multiple al elemento <select> para habilitar varias selecciones.
HTMLSelectElement representa el <select> elemento. Utilice selectedIndex y value para obtener el índice y el valor de la opción seleccionada.
HTMLOptionElement representa el <option> elemento. Si se selecciona la opción, la propiedad selected es true., El selectedText y selectedValue propiedades devuelven el text y value de la opción seleccionada.

Fue este tutorial útil ?
YesNo

JavaScript select Element (Español)