Wie man den angezeigten Text eines Dropdown-Menüs in JavaScript abruft

Javascript Dom Browser Client Side

Beim Erstellen interaktiver Webanwendungen kann es erforderlich sein, Informationen aus Dropdown-Menüs (auch bekannt als Auswahlfelder) zu extrahieren. Während es relativ unkompliziert ist, den Wert der ausgewählten Option zu erhalten, können Herausforderungen auftreten, wenn versucht wird, den angezeigten Text abzurufen. Dieser Blogbeitrag führt Sie Schritt für Schritt durch diesen Prozess und sorgt für Klarheit und ein leichtes Verständnis.

Das Problem: Abfragen des angezeigten Textes

Lassen Sie uns eine Situation betrachten, in der Sie ein Dropdown-Menü in Ihrem HTML haben. Während Sie den Wert der ausgewählten Option ganz einfach mit folgendem JavaScript abrufen können:

document.getElementById('newSkill').value

Könnten Sie Schwierigkeiten haben, den sichtbaren Text der ausgewählten Option abzurufen. Angenommen, Ihr Dropdown enthält Fähigkeiten als Optionen; wie holen Sie sich den Namen der ausgewählten Fähigkeit? Hier ist die HTML-Struktur als Referenz:

<select name="newSkill" id="newSkill">
    <option value="1">Eine Fähigkeit</option>
    <option value="2">Eine andere Fähigkeit</option>
    <option value="3">Noch eine Fähigkeit</option>
</select>

Die Lösung: Zugriff auf den angezeigten Text

Um den angezeigten Text der aktuell ausgewählten Option aus dem Dropdown-Menü abzurufen, können Sie einige JavaScript-Eigenschaften verwenden. Befolgen Sie diese Schritte, um dies effektiv zu tun:

Schritt-für-Schritt-Codeimplementierung

Das Auswahl-Element abrufen: Holen Sie sich zunächst eine Referenz zum Dropdown-Menü mit document.getElementById().
```
var skillsSelect = document.getElementById("newSkill");
```
Den ausgewählten Index bestimmen: Sie können herausfinden, welche Option aktuell ausgewählt ist, indem Sie die Eigenschaft selectedIndex verwenden.
```
var selectedIndex = skillsSelect.selectedIndex;
```
Den Text der ausgewählten Option abrufen: Jetzt greifen Sie auf das options-Array mit dem selectedIndex zu und lesen die text-Eigenschaft der ausgewählten Option.
```
var selectedText = skillsSelect.options[selectedIndex].text;
```

Vollständiges Beispiel

Hier ist die vollständige Implementierung des oben beschriebenen Prozesses:

var skillsSelect = document.getElementById("newSkill");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;
console.log(selectedText);  // Gibt den angezeigten Text der ausgewählten Option aus

Erklärung des Codes

document.getElementById("newSkill"): Dieser Funktionsaufruf ruft das HTML <select>-Element anhand seiner ID ab.
skillsSelect.selectedIndex: Dies gibt die Indexnummer der aktuell ausgewählten Option im Auswahlfeld zurück.
skillsSelect.options[selectedIndex].text: Mit dem Index greifen Sie auf die entsprechende Option zu und rufen den Textwert ab, der für Benutzer sichtbar ist.

Fazit

Das Extrahieren des angezeigten Textes aus einem Dropdown-Menü kann die Interaktivität Ihrer Webanwendungen erhöhen. Wenn Sie verstehen, wie Sie das DOM durchqueren und die Eigenschaften von HTML-Elementen abrufen, werden Sie in der Lage sein, ansprechendere und reaktionsschnellere Nutzererlebnisse zu schaffen. Jetzt sind Sie mit dem Wissen ausgestattet, um ganz einfach die Texte der ausgewählten Optionen aus Dropdown-Boxen abzurufen!