Wybierz JavaScript

exp | JavaScript | log | open | sin | split

Michael Zippo

Ponieważ nauczysz się tworzyć formularze internetowe, jednym z najczęstszych zadań jest pobieranie wartości z rozwijanych menu. W tym artykule dowiemy się, jak uzyskać te wartości za pomocą JavaScript.

Zróbmy krótkie podsumowanie tego, jak utworzyć element rozwijany za pomocą HTML. Śledź mój Codepen , jeśli się zgubisz.

Aby zbudować nasz rozwijany element, musimy użyć opcji select i opcji potomnej zagnieżdżonej poniżej. Element wyboru tworzy rozwijane menu, a za pomocą tagów opcji ustawiamy te opcje w rozwijanym menu na żywo.

Utwórzmy rozwijane menu naszych ulubionych owoców (które mają emotikony).

dodaliśmy puste h2, które wypełnimy później JavaScriptem. W tym momencie możesz wybrać swój ulubiony owoc:

Tutaj mamy dostęp do atrybutu options d ` element tablicy. Następnie wybieramy indeks wybranej opcji i uzyskujemy dostęp do jej wartości lub tekstu.

Teraz spróbuj połączyć obie zmienne w console.log. Co się dzieje? Nic. Czemu? Ponieważ nasz pierwszy element ma pustą wartość (to tylko symbol zastępczy). Wyraź swoją opinię na temat pierwszej opcji i spróbuj ponownie. Tak! Wartość i tekst otrzymujemy za pomocą javascript.

Nasłuchiwanie zmian w rozwijanym menu za pomocą javascript

Musimy uczynić nasze rozwijane menu dynamicznym, ponieważ JavaScript ma na celu reagowanie na zmiany na Twojej stronie. Mając to na uwadze, przypiszemy element eventListener do naszego elementu owocowego.

Dzięki naszemu eventListener słyszymy zmianę w naszym rozwijanym menu. Zauważ, że możesz również uzyskać wartość wybranej opcji, uruchamiając e.target.value, co prawdopodobnie widziałeś w innym module samouczka.

Jesteśmy tutaj. Możesz teraz wybrać opcję owocową, a JavaScript zareaguje na zmiany w naszym rozwijanym menu i odpowiednio zaktualizuje h2. Prawo sukcesu

Wniosek

Jak rozwijanie wartości „Ęã”Ęã jest podstawową umiejętnością podczas nauki tworzenia stron internetowych. Wartości, które otrzymujemy, są ważne, jeśli chcemy zaktualizować podstawowe dane, pokaż wybór dla użytkownika lub po prostu "reaguj" na zmiany w DOM. Dzięki JavaScript możemy uzyskać te wartości „w krótkim czasie