Ebben a cikkben megtudjuk, hogyan lehet a jQuery segítségével a legördülő listában kiválasztott értékeket lekérni. Először is megértjük ezt a cikket a jQuery, a jQuery Selector és a jQuery val () metódussal. Ezt követően különböző példák segítségével megértjük ezt a témát.
Mit értesz jQuery alatt?
A jQuery egy gyors, könnyű, kicsi és funkciókban gazdag JavaScript-könyvtár.
A jQuery használata: a kiválasztott választó a val () metódussal együtt, hogy megkeresse a kiválasztott opció értékét a legördülő listában.
A jQuery választója:
Ez egy HTML-elem, amelyben a deklarációt alkalmazzák.
Például: kiválasztott, ellenőrzött stb.
A Kiválasztva az alapértelmezett választás megadására szolgál az űrlap kezdeti betöltésekor.
str.substring java-ban
val () metódus a jQuery-ben:
Ez a módszer az űrlapelemek értékeinek lekérésére vagy a kiválasztott elemekhez használt attribútum értékének beállítására szolgál.
Szintaxis:
$(selector).val ();
Példa:
$('input: text').val ('javaTpoint!');
Legördülő lista és címkével.
A kiválasztási és opciós címkék segítségével legördülő menük hozhatók létre. Lehetővé teszik a felhasználó számára, hogy egy vagy több lehetőséget válasszon az opciók listájából. Az összes lehetőség nem jelenik meg a képernyőn, de láthatóak a legördülő lista megnyitásakor. Helytakarékosságra szolgálnak, mivel a listából csak egy elem jelenik meg.
A legördülő listák létrehozásához a címke helyett a címke használatos. A párosított címke a nyitó címkével kezdődik és a záró címkével végződik. Ezt a címkét a címkével együtt kell használni.
Szintaxis:
Text Label-1 Text Label-2 ………………………………………………………………………………………………….. …………………………………………………………………………………………………..
A címkével használt különféle attribútumok a következők:
A címkével használt különféle attribútumok a következők:
A következő példák segítségével lekérheti a kiválasztott értéket a jQuery legördülő listájából.
1. példa:
A kiválasztott érték lekérése a jQuery legördülő listájából.
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>
Magyarázat:
A fenti példában a és címke segítségével készítettünk egy legördülő listát. Ebben, ha a listából kiválasztunk egy többszörös értéket és létrehozunk a miután a listából kiválasztotta a több elemet, és rákattintunk egy gombra, megjelenik egy figyelmeztető üzenet a kiválasztott elemmel a legördülő listából.
United States India United Kingdom Brazil Germany <br> <br> <b> Get selected values from list </b>
Itt,
A Méret ='3' a legördülő listában látható elemek számának megjelenítésére szolgál, a többszörös pedig több érték kiválasztására szolgál a legördülő listából.
Kimenet:
A példa kimenetét az alábbiakban mutatjuk be.