Jak pobrać wybraną wartość z rozwijania JavaScript
W JavaScript często napotykamy przyjazne dla użytkownika strony internetowe, które zawierają kwestionariusz lub formularz, aby uzyskać wartość pojedynczych lub wielu wybranych opcji. Ponadto, w ramach strony internetowej opartej na quizie, chcemy powiadomić użytkownika o statusie w stosunku do podanej odpowiedzi o wartości (poprawne, zła). W takich przypadkach odzyskanie wybranych wartości z rozwijania jest bardzo pomocne w zapewnieniu jasności i oszczędzaniu czasu na końcu użytkownika.
W tym artykule poprowadzi Cię do pobrania wybranych wartości z listy rozwijanej w JavaScript.
Jak uzyskać/pobrać wybraną wartość z rozwijania w JavaScript?
Aby pobrać wybraną wartość z rozwijanej w JavaScript, możesz użyć:
-
- "wartość" nieruchomość.
- "wybraneIndex" nieruchomość.
Teraz przejdziemy przez każde z wymienionych podejść jeden po drugim!
Metoda 1: Pobierz/pobieraj wybraną wartość z rozwijanej w JavaScript za pomocą właściwości wartości
„„wartość„Właściwość zwraca atrybut wartości pola tekstowego. Skorzystamy z tej metody, aby uzyskać wybraną opcję z listy rozwijanej i wyświetlić jej wartość:
Składnia
wybór.wartość
Tutaj "wartość„Własność zwróci konkretną wartość wybraną z listy rozwijanej.
Przejrzyjmy następujący przykład, aby lepiej zrozumieć koncepcję:
Przykład
W tym przykładzie określamy ID o nazwie „wybierać”I wstaw wartości opcji, które należy wybrać na liście rozwijanej. Te wartości opcji zostaną umieszczone w „”Tagi.
Teraz dołączymy przycisk z „na kliknięcie" wydarzenie. Będzie to działać w taki sposób, że gdy przycisk o wartości „Sprawdź opcję„Bądź naciśnięty, funkcja„Wybierz wartość()„Zostanie uruchomiony:
Wybierz płeć z podanej listy rozwijanej:
Wartość wybranej płci to:
class = "wyjście">
Następnie zadeklarujemy funkcję o nazwie „Wybierz wartość()". Tutaj użyjemy „dokument.QuerySelelect ()„Metoda dostępu do identyfikatora utworzonego menu rozwijanego. Następnie otrzymamy wartość wybranej płci z listy rozwijanej za pomocą „wartość" nieruchomość. Wreszcie „„TextContent„Właściwość zwróci treść tekstu wybranej wartości i wyświetli ją:
Wyjście powyższej implementacji spowoduje następujący sposób:
Metoda 2: Odzyskaj wybraną wartość z rozwijanej w JavaScript za pomocą właściwości „SelectedIndex”
„„opcja„Nieruchomość zwraca zbiór wszystkich elementów i„wybraneIndex„Właściwość zwraca indeks wybranej opcji z„opcja„Nieruchomość na rozwijanej liście. Użyjemy obu razem, aby wybrać określoną opcję i wyświetlić wartość odpowiadającej opcji, uzyskując dostęp do jej indeksu.
Składnia
wybierać.opcje [wybierz.selectedIndex].wartość
Powyższa składnia pomoże w uzyskaniu wartości wybranej opcji menu rozwijanego za pomocą jej indeksu.
Spójrz na poniższy przykład demonstracji:
Przykład
Teraz użyjemy tego samego kodu HTML podanego w poprzednim przykładzie i wprowadzimy pewne zmiany w kodzie JavaScript. Aby to zrobić, zdefiniujemy funkcję „Wybierz wartość()”I uzyskaj dostęp do przypisanego identyfikatora menu rozwijanego o nazwie„wybierać”Z pomocą dokumentu.Metoda QuerySelector (). Następnie użyjemy „opcje„Nieruchomość w połączeniu z innymi nieruchomościami, w tym„wybraneIndex„Aby pobrać wartość wybranej opcji.
Wreszcie „„TextContent”W tej metodzie zostanie zastosowana właściwość do zwrócenia treści tekstowej wybranej wartości i wyświetlenia odpowiedniej wartości:
Wyjście
Przedstawiliśmy najłatwiejsze metody odzyskania wybranej wartości z rozwijania w JavaScript.
Wniosek
Aby uzyskać/odzyskać wybraną wartość z rozwijanej w JavaScript, zastosuj „wartość„Właściwość do uzyskania wartości wybranego elementu z listy rozwijanej i„opcja„Własność wraz z„wybraneIndex„Właściwość, aby uzyskać zestaw opcji i uzyskać wartość wybranej opcji, uzyskując dostęp do indeksu konkretnej opcji. Ten zapis wyjaśnił metody uzyskania/pobierania wybranych wartości z rozwijania w JavaScript.