TechCodeview

En este artículo, aprenderemos cómo obtener valores seleccionados en la lista desplegable con la ayuda de jQuery. En primer lugar, entenderemos este artículo utilizando jQuery, jQuery selector y el método jQuery val (). Después de eso, entenderemos este tema con la ayuda de varios ejemplos.

0.0625 como fracción

¿Qué quieres decir con jQuery?

jQuery es una biblioteca de JavaScript rápida, liviana, pequeña y con muchas funciones.

Utilice jQuery: selector seleccionado en combinación con el método val () para encontrar el valor de la opción seleccionada en una lista desplegable.

El selector en jQuery:

Es un elemento HTML en el que se aplica la declaración.

Por ejemplo: seleccionado, marcado, etc.

Seleccionado se utiliza para especificar la opción predeterminada cuando el formulario se carga inicialmente.

Método val() en jQuery:

Este método se utiliza para obtener los valores de los elementos del formulario o establecer el valor del atributo utilizado para los elementos seleccionados.

Sintaxis:

 $(selector).val (); 

Ejemplo:

 $('input: text').val ('javaTpoint!'); 

Lista desplegable con una etiqueta.

Las etiquetas de selección y opción se utilizan para crear menús desplegables. Permiten al usuario seleccionar opciones únicas o múltiples de una lista de opciones. Todas las opciones no se muestran en la pantalla, pero son visibles cuando abren la lista desplegable. Se utilizan para ahorrar espacio ya que solo se muestra un elemento de la lista.

Para crear listas desplegables, se utiliza etiqueta en lugar de etiqueta. La etiqueta emparejada comienza con la etiqueta de apertura y termina con la etiqueta de cierre. Esta etiqueta debe usarse con la etiqueta .

Sintaxis:

 Text Label-1 Text Label-2 ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. 

Los diversos atributos utilizados con la etiqueta son:

Múltiple:Se utiliza para configurar la etiqueta para que acepte numerosas opciones. De forma predeterminada, puede tomar una única opción seleccionada por el usuario. Para seleccionar múltiples opciones, un usuario debe presionar hacer clic mientras hace clic en la opción.Nombre:Se utiliza para especificar un nombre para la lista desplegable.

Los diversos atributos utilizados con la etiqueta son:

la sonrisa mas bonita del mundo

Valor:Se utiliza para especificar el valor que se envía cuando se envía el formulario. Si el atributo de valor se omite en la etiqueta, entonces se utiliza el contenido del título.Seleccionado:Se utiliza para especificar la opción preseleccionada cuando el formulario se carga inicialmente en un navegador.

Los siguientes ejemplos se utilizan para obtener el valor seleccionado de la lista desplegable en jQuery.

Ejemplo 1:

Cómo obtener el valor seleccionado de la lista desplegable en jQuery.

 Get Selected Value in drop-down using jQuery h1 { color: green; } h5 { color: green; } h4 { color: green; } p { color: red; } .select { margin: 40px; width: 60%; height: 300px; padding: 30px; border: 2px solid green; } body { background-color: pink; } $(document).ready (function () { $(&apos;select.country&apos;).change (function () { var selectedCountry = $(this).children(&apos;option:selected&apos;).val(); alert (&apos;You have selected the country - &apos; + selectedCountry); }); }); <p> <b> Get Selected Value in drop-down using jQuery </b> </p> <h4> Select Country from drop-down list: </h4> <br> United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b> 

Explicación:

En el ejemplo anterior, hemos creado una lista desplegable con la ayuda de una etiqueta. En esto, si seleccionamos un valor múltiple de la lista y creamos un después de seleccionar el elemento múltiple de la lista y hacemos clic en un botón, muestra un mensaje de alerta con el elemento seleccionado de la lista desplegable.

álgebra relacional en rdbms

 United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b> 

Aquí,

Tamaño ='3' se usa para mostrar la cantidad de elementos que se muestran en la lista desplegable, múltiple se usa para seleccionar múltiples valores de la lista desplegable.

Producción:

El resultado de este ejemplo se proporciona a continuación.