I denne artikel lærer vi, hvordan du får udvalgte værdier i rullelisten ved hjælp af jQuery. Først og fremmest vil vi forstå denne artikel ved hjælp af jQuery, jQuery selector og jQuery val () metoden. Derefter vil vi forstå dette emne ved hjælp af forskellige eksempler.
Hvad mener du med jQuery?
jQuery er et hurtigt, let, lille og funktionsrigt JavaScript-bibliotek.
Brug jQuery: valgt vælger i kombination med val () metode for at finde den valgte indstillingsværdi i en rulleliste.
Vælgeren i jQuery:
Det er et HTML-element, hvori erklæringen anvendes.
For eksempel: valgt, kontrolleret osv.
Valgt bruges til at angive standardvalget, når formularen indlæses.
val () metode i jQuery:
Denne metode bruges til at hente værdierne af formularelementer eller indstille værdien af attributten, der bruges til de valgte elementer.
Syntaks:
$(selector).val ();
Eksempel:
$('input: text').val ('javaTpoint!');
Dropdown liste med og tag.
Vælg og option-tags bruges til at oprette rullemenuer. De giver brugeren mulighed for at vælge enkelt eller flere valg fra en liste over muligheder. Alle valgene vises ikke på skærmen, men de er synlige, når de trækker rullelisten. De bruges til at spare plads, da kun ét punkt på listen vises.
Til oprettelse af Pull down-lister bruges tag i stedet for tag . Det parrede tag starter med åbningsmærket og slutter med det afsluttende mærke. Dette tag skal bruges sammen med tagget.
Syntaks:
Text Label-1 Text Label-2 ………………………………………………………………………………………………….. …………………………………………………………………………………………………..
De forskellige attributter, der bruges med tagget, er:
De forskellige attributter, der bruges med tag er:
Følgende eksempler bruges til at få den valgte værdi fra rullelisten i jQuery.
Eksempel 1:
Sådan får du valgt værdi fra rullelisten i 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 () { $('select.country').change (function () { var selectedCountry = $(this).children('option:selected').val(); alert ('You have selected the country - ' + 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>
Forklaring:
I ovenstående eksempel har vi lavet en drop-down liste ved hjælp af og tag. I dette, hvis vi vælger en multipel værdi fra listen og opretter en efter at have valgt det multiple element fra listen, og vi klikker på en knap, viser det en advarselsmeddelelse med det valgte element fra rullelisten.
United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b>
Her,
Størrelse ='3' bruges til at vise antallet af elementer vist i rullelisten, multiple bruges til at vælge flere værdier fra rullelisten.
Produktion:
Resultatet af dette eksempel er givet nedenfor.