OPCIÓN DE SELECCIÓN DE JAVASCRIPT

Entenderemos cómo gestionar < seleccionar > opción en javascript en este tutorial.

Opción de selección HTML

Una opción nos facilita la lista de opciones. Nos permite elegir una única o más de una opción. Usamos los elementos y para formar una opción.

Por ejemplo:

 Red Yellow Green Blue

La opción nos permite elegir una opción a la vez como se menciona anteriormente.

Si deseamos más de una selección, podemos incluir atributo a < múltiple > elementos a continuación:

bash elif

 Red Yellow Green Blue

Tipo HTMLSelectElement

Usamos el tipo HTMLSelectElement para interactuar con la opción en JavaScript.

El tipo HTMLSelectElement contiene los siguientes atributos útiles:

índice seleccionado-Este atributo proporciona un índice de opciones seleccionadas de base cero. El índice seleccionado será -1 cuando no se elija ninguna opción. Cuando la opción permite más de una selección, el índice seleccionado proporciona el valor de la primera opción.valor-El atributo de valor proporciona el atributo de valor del componente de opción seleccionado inicialmente si hay uno único; de lo contrario, devolverá las cadenas vacías.múltiple-Los atributos múltiples dan verdadero cuando el componente permite más de una selección. Es lo mismo que los múltiples atributos.

propiedad de índice seleccionado

Aplicamos la API DOM como selector de consulta() o getElementById() .

El ejemplo indica cómo obtener el índice de la opción seleccionada que se menciona a continuación:

 JavaScript Select Option Demo Select a Color Red Yellow Green Blue Get a Selected Index const btn = document.querySelector(&apos;#btn&apos;); const sb = document.querySelector(&apos;#color&apos;); btn.onclick = (event) =&gt; { event.preventDefault(); alert(sb.selectedIndex); };

Cómo funciona:

Inicialmente, seleccione los componentes y con la ayuda del método querySelector().
Después de eso, vincule el detector de eventos de clic a este botón y muestre el índice seleccionado con la ayuda del método alert() si se presiona el botón.

valorar la propiedad

La propiedad de valor del elemento se basa en el componente y el atributo múltiple de su HTML:

La propiedad de valor de un cuadro de selección será una cadena vacía cuando no se haya seleccionado ninguna opción.
La propiedad de valor de un cuadro de selección será el valor de la opción elegida cuando se haya elegido una opción y contenga el atributo de valor.
La propiedad de valor de un cuadro de selección será el texto de la opción elegida cuando se haya elegido una opción y no contenga ningún atributo de valor.
La propiedad de valor de un cuadro de selección se derivará de la opción seleccionada inicial con respecto a las dos reglas anteriores cuando se elija más de una opción.

Considere el siguiente ejemplo:

 JavaScript Selected Value Select a Color Red Yellow Green Blue Get a Selected Value const btn = document.querySelector(&apos;#btn&apos;); const sb = document.querySelector(&apos;#color&apos;); btn.onclick = (event) =&gt; { event.preventDefault(); alert(sb.value); };

En este ejemplo anterior:

El atributo de valor del elemento está vacío cuando seleccionamos la opción inicial.
El atributo de valor de un cuadro de selección será Ember.js debido a que la opción elegida no contiene ningún atributo de valor cuando elegimos la última opción.
El atributo de valor será '1' o '2' cuando elijamos la tercera o segunda opción.

Tipo HTMLOptionElement

El tipo HTMLOptionElement ilustra el elemento en JavaScript.

Este tipo contiene las siguientes propiedades:

Índice- El índice de la opción dentro del grupo de opciones.

Seleccionado- Devuelve un valor verdadero si se elige la opción. Establecemos la propiedad seleccionada como verdadera para seleccionar una opción.

Texto- Devuelve el texto de la opción.

Valor- Devuelve el atributo de valor de HTML.

El componente contiene un atributo de opción que nos permite acceder a las opciones de la colección:

 selectBox.options

Por ejemplo, para acceder al valor y al texto de la segunda opción, utilizamos lo siguiente:

 const text = selectBox.options[1].text; const value = selectBox.options[1].value;

Para obtener una opción seleccionada del componente junto con una selección individual, utilizamos el siguiente código:

 let selectOption = selectBox.options [selectBox.selectedIndex];

Después de eso, podemos acceder al valor y al texto de una opción seleccionada mediante las propiedades de valor y texto:

 const selectedText = selectedOption.text; const selectedValue = selectedOption.value;

Cuando el componente permite más de una selección, podemos usar un atributo seleccionado para determinar qué opción está seleccionada:

 JavaScript Selected Box Select one or more Colors: Red Yellow Green Blue Get a Selected Colors const btn = document.querySelector(&apos;#btn&apos;); const sb = document.querySelector(&apos;#color&apos;); btn.onclick = (e) =&gt; { e.preventDefault(); const selectValues = [].filter.call(sb.options, option =&gt; option.selected).map (option =&gt; option.text); alert(selectedValues); };

En el ejemplo, el sb.opción es el objeto similar a una matriz. Por lo tanto, no contiene el método filter() igual que el objeto Array.

Para tomar prestados estos tipos de métodos a través de un objeto de matriz, usamos un método call(), a continuación se muestra la variedad de opciones elegidas:

 [].filter.call(sb.options, option =&gt; option.selected)

Y para obtener el atributo de texto de cualquier opción, podemos encadenar el resultado de un método filter() junto con un método map() como se muestra a continuación:

 .map(option =&gt; option.text);

Para obtener la opción seleccionada usando el bucle for

Podemos usar el bucle for para iterar por las opciones de la lista seleccionada para determinar cuál se elige. Se podría describir una función para devolver la referencia a una opción seleccionada o al valor. A continuación se da la referencia a una opción seleccionada:

 function getSelectedOption(sel) { var opt; for (var i= 0, len= sel.options.length; i<len; i++) { opt="sel.options[i];" if (opt.selected="==" true) break; } return opt; var console.log(opt.value); console.log(opt.text); < pre> <p>This function gives a single chosen option, which is compatible for the select-one type of select list. The same function compatible for select-multiple type pf select lists could give more than one selected option.</p> <h2>Summary</h2> <ul> <li>The component permits us for selecting one or more options. We can include the multiple property to the component for enabling more than one selections.</li> <li>The HTMLOptionElement illustrates the component. The selected attribute is true if an option is chosen. The selected value and selected text attributes return the value Add the text of the chosen option.</li> <li>The HTMLSelectElement illustrates the component. We can use the value and selected index for getting the value and index of the chosen option.</li> </ul> <hr></len;>

TechCodeview