In questo articolo impareremo come ottenere i valori selezionati nell'elenco a discesa con l'aiuto di jQuery. Prima di tutto, comprenderemo questo articolo utilizzando jQuery, jQuery selector e jQuery val() metodo. Successivamente, comprenderemo questo argomento con l'aiuto di vari esempi.

Cosa intendi per jQuery?

jQuery è una libreria JavaScript veloce, leggera, piccola e ricca di funzionalità.

Usa jQuery: selettore selezionato in combinazione con il metodo val() per trovare il valore dell'opzione selezionata in un elenco a discesa.

Il selettore in jQuery:

È un elemento HTML in cui viene applicata la dichiarazione.

Per esempio: selezionato, controllato, ecc.

Selezionato viene utilizzato per specificare la scelta predefinita al momento del caricamento iniziale del modulo.

metodo val() in jQuery:

Questo metodo viene utilizzato per ottenere i valori degli elementi del modulo o impostare il valore dell'attributo utilizzato per gli elementi selezionati.

Sintassi:

 $(selector).val (); 

Esempio:

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

Elenco a discesa con e tag.

I tag select e option vengono utilizzati per creare menu a discesa. Consentono all'utente di selezionare scelte singole o multiple da un elenco di opzioni. Tutte le scelte non vengono visualizzate sullo schermo, ma sono visibili quando si apre l'elenco a discesa. Vengono utilizzati per risparmiare spazio poiché viene visualizzato solo un elemento dell'elenco.

Per creare elenchi a discesa, viene utilizzato tag invece di tag . Il tag abbinato inizia con il tag di apertura e termina con il tag di chiusura. Questo tag deve essere utilizzato con il tag .

Sintassi:

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

I vari attributi utilizzati con il tag sono:

Multiplo:Viene utilizzato per impostare il tag in modo che accetti numerose opzioni. Per impostazione predefinita, può richiedere una singola opzione selezionata dall'utente. Per selezionare più opzioni, l'utente deve premere clic mentre fa clic sull'opzione.Nome:Viene utilizzato per specificare un nome per l'elenco a discesa.

I vari attributi utilizzati con il tag sono:

Valore:Viene utilizzato per specificare il valore che viene inviato quando viene inviato il modulo. Se l'attributo value viene omesso nel tag, viene utilizzato il contenuto del titolo.Selezionato:Viene utilizzato per specificare la scelta preselezionata al momento del caricamento iniziale del modulo in un browser.

I seguenti esempi vengono utilizzati per ottenere il valore selezionato dall'elenco a discesa in jQuery.

Esempio 1:

Come ottenere il valore selezionato dall'elenco a discesa in 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> 

Spiegazione:

Nell'esempio sopra, abbiamo creato un elenco a discesa con l'aiuto di e tag. In questo, se selezioniamo un valore multiplo dall'elenco e creiamo a dopo aver selezionato l'elemento multiplo dall'elenco e fatto clic su un pulsante, viene visualizzato un messaggio di avviso con l'elemento selezionato dall'elenco a discesa.

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

Qui,

Size ='3' viene utilizzato per visualizzare il numero di elementi mostrati nell'elenco a discesa, multiple viene utilizzato per selezionare più valori dall'elenco a discesa.

Produzione:

L'output di questo esempio è riportato di seguito.