W tym artykule dowiemy się, jak uzyskać wybrane wartości z listy rozwijanej za pomocą jQuery. Przede wszystkim zrozumiemy ten artykuł za pomocą jQuery, selektora jQuery i metody val() jQuery. Następnie zrozumiemy ten temat za pomocą różnych przykładów.

Co masz na myśli mówiąc jQuery?

jQuery to szybka, lekka, mała i bogata w funkcje biblioteka JavaScript.

Użyj jQuery: wybrany selektor w połączeniu z metodą val (), aby znaleźć wartość wybranej opcji na liście rozwijanej.

Selektor w jQuery:

Jest to element HTML, w którym stosowana jest deklaracja.

np. średnia

Na przykład: wybrane, sprawdzone itp.

Wybrane służy do określenia domyślnego wyboru podczas początkowego ładowania formularza.

metoda val () w jQuery:

Metodą tą można uzyskać wartości elementów formularza lub ustawić wartość atrybutu użytego dla wybranych elementów.

wiosna i wiosna mvc

Składnia:

 $(selector).val (); 

Przykład:

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

Lista rozwijana z tagiem i.

Tagi wyboru i opcji służą do tworzenia menu rozwijanych. Pozwalają użytkownikowi wybrać jedną lub wiele opcji z listy opcji. Wszystkie wybory nie są pokazane na ekranie, ale są widoczne po pociągnięciu listy rozwijanej. Służą do oszczędzania miejsca, ponieważ wyświetlana jest tylko jedna pozycja z listy.

Do tworzenia list rozwijanych zamiast tagu używany jest tag. Sparowany tag zaczyna się od tagu otwierającego i kończy się tagiem zamykającym. Ten tag musi być używany z tagiem .

Składnia:

metody listy Java

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

Różne atrybuty używane w tagu to:

Wiele:Służy do ustawienia tagu tak, aby akceptował wiele opcji. Domyślnie może przyjąć jedną opcję wybraną przez użytkownika. Aby wybrać wiele opcji, użytkownik musi nacisnąć przycisk „kliknij” podczas klikania opcji.Nazwa:Służy do określenia nazwy listy rozwijanej.

Różne atrybuty używane z tagiem to:

Wartość:Służy do określenia wartości wysyłanej po przesłaniu formularza. Jeśli w tagu pominięto atrybut value, wykorzystana zostanie treść tytułu.Wybrany:Służy do określenia wstępnie wybranego wyboru podczas początkowego ładowania formularza w przeglądarce.

Poniższe przykłady służą do pobrania wybranej wartości z listy rozwijanej w jQuery.

Przykład 1:

Jak uzyskać wybraną wartość z listy rozwijanej w 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> 

Wyjaśnienie:

W powyższym przykładzie utworzyliśmy listę rozwijaną za pomocą tagu i. W tym przypadku, jeśli wybierzemy wielokrotną wartość z listy i utworzymy po wybraniu z listy elementu wielokrotnego i kliknięciu przycisku wyświetla się komunikat ostrzegawczy z wybranym elementem z listy rozwijanej.

wiersz i kolumna

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

Tutaj,

Rozmiar ='3' służy do wyświetlania liczby elementów pokazanych na liście rozwijanej, a multiple służy do wybierania wielu wartości z listy rozwijanej.

Wyjście:

Dane wyjściowe tego przykładu podano poniżej.