TechCodeview

I denne artikkelen lærer vi hvordan du får utvalgte verdier i nedtrekkslisten ved hjelp av jQuery. Først av alt vil vi forstå denne artikkelen ved å bruke jQuery, jQuery selector og jQuery val () metoden. Etter det vil vi forstå dette emnet ved hjelp av forskjellige eksempler.

Hva mener du med jQuery?

jQuery er et raskt, lett, lite og funksjonsrikt JavaScript-bibliotek.

Bruk jQuery: valgt velger i kombinasjon med val ()-metoden for å finne den valgte alternativverdien i en rullegardinliste.

Velgeren i jQuery:

Det er et HTML-element der erklæringen brukes.

For eksempel: valgt, sjekket osv.

Valgt brukes til å spesifisere standardvalget når skjemaet først lastes inn.

val () metode i jQuery:

Denne metoden brukes til å hente verdiene til skjemaelementer eller angi verdien av attributtet som brukes for de valgte elementene.

Syntaks:

 $(selector).val (); 

Eksempel:

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

Nedtrekksliste med og tag.

Velg- og alternativ-taggene brukes til å lage rullegardinmenyer. De lar brukeren velge ett eller flere valg fra en liste med alternativer. Alle valgene vises ikke på skjermen, men de er synlige når de trekker ned rullegardinlisten. De brukes til å spare plass da bare ett element i listen vises.

For å lage nedtrekkslister brukes tag i stedet for tag . Den sammenkoblede taggen starter med åpningstaggen og slutter med den avsluttende taggen. Denne taggen må brukes med taggen.

Syntaks:

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

De ulike attributtene som brukes med taggen er:

Flere:Den brukes til å sette taggen til å godta en rekke alternativer. Som standard kan det ta ett enkelt alternativ valgt av brukeren. For å velge flere alternativer, må en bruker trykke klikk mens han klikker på alternativet.Navn:Den brukes til å angi et navn for rullegardinlisten.

De ulike attributtene som brukes med taggen er:

Verdi:Den brukes til å angi verdien som sendes når skjemaet sendes inn. Hvis verdiattributtet er utelatt i taggen, brukes tittelinnholdet.Valgt:Den brukes til å spesifisere det forhåndsvalgte valget når skjemaet først lastes inn i en nettleser.

Følgende eksempler brukes for å få den valgte verdien fra rullegardinlisten i jQuery.

Eksempel 1:

Hvordan få valgt verdi fra rullegardinlisten 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 () { $(&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> 

Forklaring:

I eksemplet ovenfor har vi laget en nedtrekksliste ved hjelp av og tag. I dette, hvis vi velger en multippel verdi fra listen og lager en etter å ha valgt det flere elementet fra listen og vi klikker på en knapp, viser det en varselmelding med det valgte elementet fra rullegardinlisten.

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

Her,

Størrelse ='3' brukes til å vise antall elementer vist i rullegardinlisten, multiple brukes til å velge flere verdier fra rullegardinlisten.

Produksjon:

Resultatet av dette eksemplet er gitt nedenfor.