Javascript Auswählen

exp | JavaScript | log | open | sin | split

Michael Zippo 04.11.2021

Während Sie lernen werden, wie man Webformulare erstellt, ist eine der häufigsten Aufgaben das Abrufen von Werten ‚Äã‚Äãaus Dropdown-Menüs. In diesem Artikel werden wir lernen, wie man diese Werte mit JavaScript erhält.

Lassen Sie uns einen kurzen Überblick darüber geben, wie man ein Dropdown-Element mit HTML erstellt. Folgen Sie meinem Codepen , wenn Sie sich verlaufen.

Um unser Dropdown-Element zu erstellen, müssen wir select und die unten verschachtelten -Optionskinder verwenden. Das Auswahlelement erstellt das Dropdown-Menü und mit den Option-Tags setzen wir diese Optionen im Dropdown-Menü live auf.

Erstellen wir ein Dropdown-Menü unserer Lieblingsfrüchte (die Emojis haben).

wir haben ein leeres h2 hinzugefügt, das wir später mit JavaScript füllen werden. An dieser Stelle können Sie Ihre Lieblingsfrucht auswählen:

Hier greifen wir auf das Attribut options d ` array element zu. Als nächstes wählen wir den Index der ausgewählten Option und greifen auf ihren Wert oder Text zu.

Versuchen Sie nun, beide Variablen mit console.log zu protokollieren. Was ist los? Gar nichts. Warum? Weil unser erstes Element einen leeren Wert hat (es ist nur ein Platzhalter). Geben Sie Ihre Meinung zur ersten Option ab und versuchen Sie es erneut. Yay! Wir bekommen den Wert und den Text mit dem Javascript.

Auf Dropdown-Menüänderungen mit Javascript warten

Wir müssen unser Dropdown-Menü dynamisch machen, weil JavaScript wurde entwickelt, um auf Änderungen auf Ihrer Seite zu reagieren. Vor diesem Hintergrund weisen wir unserem Element fruit.

Mit unserem eventListener hören wir eine Änderung in unserem Dropdown-Menü. Beachten Sie, dass Sie den Wert der ausgewählten Option auch erhalten können, indem Sie e.target.value ausführen, was Sie wahrscheinlich in einem anderen Tutorial-Modul gesehen haben.

Wir sind hier. Sie können jetzt eine Fruchtoption auswählen und JavaScript reagiert auf die Änderungen in unserem Dropdown-Menü und aktualisiert unser h2 entsprechend. Erfolgreiches Gesetz

Fazit

Wie das Entfalten von Werten eine wesentliche Fähigkeit ist, wenn Sie Webentwicklung lernen. Die Werte, die wir erhalten, sind wichtig, wenn wir eine grundlegende Datenauswahl für den Benutzer aktualisieren oder anzeigen möchten einfach auf Änderungen im DOM "reagieren". Mit JavaScript können wir diese Werte ‚Äã‚Äãin kürzester Zeit