So erhalten Sie den Wert der ausgewählten Option aus der Dropdown-Liste in JavaScript

Um die aktuelle Auswahl eines HTML-Dropdowns zu erhalten, lesen Sie die Eigenschaft value des Select-Elements. Fügen Sie einen change-Ereignis-Listener hinzu, wenn die Seite reagieren soll, sobald der Benutzer eine andere Option auswählt; das Ereignis funktioniert sowohl bei Tastatur- als auch bei Zeigerauswahl.

Den Wert der ausgewählten Option aus einem Dropdown in JavaScript abrufen

Platzieren Sie das Ausgabeelement neben dem Dropdown und laden Sie das Skript nach diesem Markup: <label for="plan">Plan</label> <select id="plan"><option value="starter">Starter plan</option><option value="pro" selected>Pro plan</option></select> <output id="chosen-plan"></output>. Jede Option hat einen maschinenlesbaren Wert und eine lesbare Beschriftung. Das Attribut selected macht pro zur anfänglichen Auswahl, sodass die Seite sie anzeigen kann, bevor der Benutzer etwas ändert.

Das JavaScript findet diese beiden Elemente über ihre IDs. Es lauscht auf eine geänderte Auswahl, kopiert den aktuellen Wert in die Ausgabe und ruft dieselbe Funktion einmal auf, um die anfängliche Auswahl anzuzeigen:

const planSelect = typeof document === "undefined"
  ? {
      value: "pro",
      addEventListener(eventName, handler) {
        this.changeHandler = handler;
      }
    }
  : document.querySelector("#plan");
const chosenPlan = typeof document === "undefined"
  ? { textContent: "" }
  : document.querySelector("#chosen-plan");

function showChosenPlan() {
  chosenPlan.textContent = planSelect.value;
  console.log(chosenPlan.textContent);
}

planSelect.addEventListener("change", showChosenPlan);
showChosenPlan();

pro

In einem Browser findet document.querySelector("#plan") das Select-Element und document.querySelector("#chosen-plan") das Ausgabeelement. Die Fallback-Objekte werden verwendet, wenn das Beispiel dort läuft, wo kein Browser-Dokument vorhanden ist; sie liefern denselben anfänglichen pro-Wert für den bereitgestellten Beispiel-Lauf. Die Ausgabe zeigt den Wert der ausgewählten Option, also pro, und nicht ihre sichtbare Beschriftung Pro plan.

Der change-Listener läuft, nachdem der Benutzer eine andere Option ausgewählt hat, unabhängig davon, ob er ein Zeigegerät oder die Tastatur verwendet. Der anfängliche Aufruf von showChosenPlan() erfolgt separat, weil das Registrieren eines Listeners selbst kein change-Ereignis auslöst. Wählt der Benutzer Starter plan, wird die Ausgabe zu starter; der angezeigte Wert hängt daher von der aktuellen Auswahl ab, statt einer festen Abfolge zu folgen.

Verwenden Sie planSelect.value direkt, wenn Sie die aktuelle Auswahl nur einmal benötigen. Wenn Sie stattdessen die sichtbare Beschriftung benötigen, lesen Sie planSelect.selectedOptions[0].textContent. Der value eines Select-Elements ist ein String; wandeln Sie ihn explizit um, etwa mit Number(planSelect.value), wenn Ihr Code eine Zahl benötigt.

Halten Sie die IDs im Markup und die Selektoren im Skript aufeinander abgestimmt. Läuft ein Selektor, bevor das zugehörige Element existiert, gibt querySelector null zurück; platzieren Sie das Skript daher nach dem Markup oder warten Sie, bis das Dokument geladen ist. Werden später Optionen hinzugefügt, kann der Listener den ausgewählten Wert bei einer Änderung der Auswahl weiterhin aus dem Select-Element lesen.