TechCodeview

In dit artikel leren we hoe u geselecteerde waarden in de vervolgkeuzelijst kunt krijgen met behulp van jQuery. Allereerst zullen we dit artikel begrijpen met behulp van de methode jQuery, jQuery selector en jQuery val () . Daarna zullen we dit onderwerp begrijpen met behulp van verschillende voorbeelden.

Wat bedoel je met jQuery?

jQuery is een snelle, lichtgewicht, kleine en veelzijdige JavaScript-bibliotheek.

Gebruik de jQuery: geselecteerde selector in combinatie met val () methode om de geselecteerde optiewaarde in een vervolgkeuzelijst te vinden.

De selector in jQuery:

Het is een HTML-element waarin de declaratie wordt toegepast.

Bijvoorbeeld: geselecteerd, gecontroleerd, enz.

Geselecteerd wordt gebruikt om de standaardkeuze op te geven wanneer het formulier voor het eerst wordt geladen.

Java versus c++

val () methode in jQuery:

Deze methode wordt gebruikt om de waarden van formulierelementen op te halen of de waarde in te stellen van het attribuut dat voor de geselecteerde elementen wordt gebruikt.

Syntaxis:

 $(selector).val (); 

Voorbeeld:

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

Vervolgkeuzelijst met en tag.

De select- en optietags worden gebruikt om vervolgkeuzemenu's te maken. Hiermee kan de gebruiker enkele of meerdere keuzes selecteren uit een lijst met opties. Alle keuzes worden niet op het scherm weergegeven, maar zijn wel zichtbaar wanneer ze uit de vervolgkeuzelijst komen. Ze worden gebruikt om ruimte te besparen, omdat slechts één item van de lijst wordt weergegeven.

Voor het maken van pull-downlijsten wordt tag gebruikt in plaats van tag . De gepaarde tag begint met de openingstag en eindigt met de sluitingstag. Deze tag moet worden gebruikt met de tag .

Syntaxis:

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

De verschillende attributen die bij de tag worden gebruikt, zijn:

Meerdere:Het wordt gebruikt om de tag zo in te stellen dat hij talloze opties accepteert. Standaard kan er één door de gebruiker geselecteerde optie zijn. Om meerdere opties te selecteren, moet een gebruiker op klikken drukken terwijl hij op de optie klikt.Naam:Het wordt gebruikt om een ​​naam voor de vervolgkeuzelijst op te geven.

De verschillende attributen die bij de tag worden gebruikt, zijn:

Waarde:Het wordt gebruikt om de waarde op te geven die wordt verzonden wanneer het formulier wordt verzonden. Als het waardeattribuut in de tag wordt weggelaten, wordt de titelinhoud gebruikt.Geselecteerd:Het wordt gebruikt om de vooraf geselecteerde keuze te specificeren wanneer het formulier voor het eerst in een browser wordt geladen.

De volgende voorbeelden worden gebruikt om de geselecteerde waarde uit de vervolgkeuzelijst in jQuery te halen.

Voorbeeld 1:

Hoe u de geselecteerde waarde uit de vervolgkeuzelijst in jQuery kunt halen.

 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> 

Uitleg:

In het bovenstaande voorbeeld hebben we een vervolgkeuzelijst gemaakt met behulp van en tag. Als we hierin een meervoudige waarde uit de lijst selecteren en een nadat we het meerdere element uit de lijst hebben geselecteerd en we op een knop hebben geklikt, wordt er een waarschuwingsbericht weergegeven met het geselecteerde element uit de vervolgkeuzelijst.

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

Hier,

tekenreeks bouwer

Size ='3' wordt gebruikt om het aantal elementen weer te geven dat in de vervolgkeuzelijst wordt weergegeven, meerdere wordt gebruikt om meerdere waarden uit de vervolgkeuzelijst te selecteren.

Uitgang:

De uitvoer van dit voorbeeld wordt hieronder gegeven.