Wie man den ausgewählten Wert aus einem Dropdown in JavaScript erhält: vollständige Analyse

Hören Sie auf zu raten: Wie Sie mit JavaScript den ausgewählten Wert aus einem Dropdown erhalten?

Haben Sie jemals die Situation erlebt, dass ein Benutzer etwas in einer Auswahlliste auf einer Website auswählt, Ihr Programm dies aber nicht "sehen" kann? Kommt Ihnen bekannt vor, oder? Dies ist eine der häufigsten Fragen auf Stack Overflow (und das zu Recht!), die Tausende von Anfängern und sogar erfahrenen Entwicklern stellen. Es scheint einfach, aber es gibt Nuancen, die wir heute ein für alle Mal klären werden.

In diesem Artikel zeige ich Ihnen nicht nur eine, sondern mehrere Möglichkeiten, wie Sie den ausgewählten Wert aus einem Dropdown mit reinem JavaScript erhalten. Sie erfahren, wie sich value von selectedIndex unterscheidet, wie Sie das Auswahlereignis behandeln und wie Sie die Falle mit der Mehrfachauswahl vermeiden. Los geht's!

Der einfachste Weg: die Eigenschaft value

Stellen Sie sich vor, Sie haben ein normales HTML-Select:

<select id="city">\n  <option value="moscow">Moskau</option>\n  <option value="spb">Sankt Petersburg</option>\n  <option value="kazan">Kasan</option>\n</select>

Um den ausgewählten Wert zu erhalten, müssen wir nur zwei Dinge tun:

\n
1. Das <select>-Element im DOM finden.
\n
2. Seine Eigenschaft value auslesen.
\n

So sieht das im Code aus:

const selectElement = document.getElementById('city');\nconst selectedValue = selectElement.value;\n\nconsole.log(selectedValue); // Gibt z.B. "spb" aus

Wichtig! Die Eigenschaft value des <select>-Elements gibt automatisch das value-Attribut der aktuell ausgewählten <option> zurück. Dies ist der einfachste und empfohlene Weg, wenn Sie den Wert und nicht den Text benötigen.

Und wenn Sie den Text des ausgewählten Punktes benötigen?

Manchmal benötigen wir nicht den Wert, sondern das, was der Benutzer sieht (z.B. "Moskau" statt "moscow"). Dafür gibt es die Eigenschaft textContent (oder innerText) der ausgewählten Option. Zuerst müssen wir jedoch die Option selbst abrufen:

const selectElement = document.getElementById('city');\nconst selectedOption = selectElement.options[selectElement.selectedIndex];\nconst selectedText = selectedOption.textContent;\n\nconsole.log(selectedText); // Gibt "Moskau" aus

Hier verwenden wir selectedIndex – den Index des ausgewählten Elements (beginnend bei 0). Dann greifen wir auf die Sammlung options zu und holen das entsprechende Element.

Wie reagiert man in Echtzeit auf eine Änderung der Auswahl?

Den Wert nur einmal zu erhalten ist gut, aber meistens müssen wir etwas tun, wenn der Benutzer die Auswahl ändert. Dafür verwenden wir das Ereignis change:

const selectElement = document.getElementById('city');\n\nselectElement.addEventListener('change', function() {\n  const selectedValue = selectElement.value;\n  const selectedText = selectElement.options[selectElement.selectedIndex].textContent;\n  \n  console.log('Ausgewählter Wert:', selectedValue);\n  console.log('Ausgewählter Text:', selectedText);\n});

Jedes Mal, wenn der Benutzer die Stadt in der Auswahlliste ändert, erhalten wir sofort aktualisierte Daten. Praktisch, oder?

Besonderer Fall: Mehrfachauswahl (multiple select)

Was aber, wenn Sie eine Auswahlliste mit Mehrfachauswahl haben? Zum Beispiel:

<select id="skills" multiple>\n  <option value="html">HTML</option>\n  <option value="css">CSS</option>\n  <option value="js">JavaScript</option>\n</select>

In diesem Fall gibt selectElement.value nur den ersten ausgewählten Wert zurück, nicht alle. Um alle ausgewählten Punkte zu erhalten, müssen Sie die Sammlung options durchlaufen:

const selectElement = document.getEl