JavaScript Ausgewählte Option ändern

Im heutigen Beitrag lernen wir, die ausgewählte Option des Select-Elements in JavaScript zu ändern.

Ausgewählte Option in JavaScript ändern

JavaScript bietet eine eingebaute Document querySelector()-Methode, die das primäre Element innerhalb des Dokuments zurückgibt, das zum gewünschten Selektor oder Satz von Selektoren passt. Null wird zurückgegeben, wenn keine Übereinstimmungen gefunden werden.

Syntax:

querySelector(selectors)

Selektoren sind eine Zeichenfolge, die ein obligatorischer Parameter ist. Diese Zeichenfolge enthält einen oder mehrere Selektoren, die abgeglichen werden müssen.

Diese Zeichenfolge muss eine gültige CSS-Auswahlzeichenfolge sein; wenn nicht, wird eine SyntaxError-Ausnahme geworfen. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter .querySelector().

Diese JavaScript-Methode gibt ein Element-Objekt zurück, das das erste Element im Dokument darstellt, das mit dem angegebenen Satz von CSS-Selektoren übereinstimmt, oder gibt null zurück, wenn es keine Übereinstimmungen gibt.

Lassen Sie es uns anhand eines Beispiels verstehen.

<select id="city">
  <option value="mumbai" selected>Mumbai</option>
  <option value="goa">Goa</option>
  <option value="delhi">Delhi</option>
</select>

const selectedValue = 'goa';
document.querySelector('#city [value="' + selectedValue + '"]').selected = true;

Das obige Beispiel hat das Dropdown-Menü select für die Auswahl des bevorzugten Standorts definiert. Angenommen, der standardmäßig bevorzugte Standort ist Mumbai.

Durch die Methode querySelector() können wir den ausgewählten Wert auf true setzen und den Standardspeicherort auf goa festlegen. Das ausgewählte Attribut akzeptiert einen booleschen Wert.

Führen Sie das obige Code-Snippet in einem beliebigen Browser aus, der JavaScript unterstützt, und zeigen Sie das folgende Ergebnis an.

Ausgabe:

Demo