Ausgewählte Option in JavaScript festlegen

1. Auswahlelement mit document.getElementById() in JavaScript setzen
2. Auswahlelement mit document.querySelector() in JavaScript setzen

select ist ein HTML-Eingabeelement, das die Liste von Dropdown-Optionen angibt, aus denen der Benutzer eine beliebige Option auswählen kann. Im heutigen Beitrag erfahren Sie, wie Sie den Wert dieses HTML-Elements in JavaScript festlegen.

Auswahlelement mit document.getElementById() in JavaScript setzen

Diese von JavaScript bereitgestellte integrierte document-Methode gibt das Elementobjekt zurück, dessen id mit der angegebenen id übereinstimmt. Der aktuelle Wert wird durch die Zeile element.value = 'NEW_VALUE' gesetzt.

Syntax

document.getElementById($id);

Parameter

$id: Es ist ein obligatorischer Parameter, der die id eines HTML-Attributs angibt, das übereinstimmen muss.

Rückgabewert

Gibt das entsprechende DOM-Elementobjekt zurück, wenn das entsprechende Element gefunden wird; andernfalls gibt es null zurück.

Beispielcode:

<select id="osDemo">
    <option value="Linux">Linux</option>
    <option value="Windows">Windows</option>
    <option value="MacOS">MacOS</option>
</select>

<button type="button" onclick="document.getElementById('osDemo').value = 'MacOS'">
Click to Update to MacOS.
</button>

Ausgabe:

Auswahlelement mit document.querySelector() in JavaScript setzen

Dies ist eine eingebaute document-Methode, die von JavaScript bereitgestellt wird und das Element-Objekt zurückgibt, dessen Selektor mit dem angegebenen Selektor übereinstimmt. Der einzige Unterschied zwischen querySelector() und querySelectorAll() besteht darin, dass das erste ein einzelnes übereinstimmendes Elementobjekt ist und dann alle Objekte des übereinstimmenden Elements zurückgegeben werden. Wird ein ungültiger Selektor übergeben, wird ein SyntaxError ausgegeben. Der aktuelle Wert wird durch die Zeile element.value = 'NEW_VALUE' gesetzt.

Syntax

document.querySelector($selector);

Parameter

$selector: Es ist ein obligatorischer Parameter, der die Übereinstimmungsbedingung von entweder class oder id angibt. Dieser String muss ein gültiger CSS-Auswahlstring sein.

Rückgabewert

Gibt das erste übereinstimmende Elementobjekt zurück, das die Selektorbedingung im DOM erfüllt.

Beispielcode:

<select id="osDemo" class="osDemoClass">
    <option value="Linux">Linux</option>
    <option value="Windows">Windows</option>
    <option value="MacOS">MacOS</option>
</select>

<button type="button" onclick="document.querySelector('.osDemoClass').value = 'MacOS'">
Click to Update to MacOS.
</button>

Ausgabe: