HOWTO · JavaScript

Ausgewählte Option in JavaScript festlegen

Im heutigen Beitrag erfahren Sie, wie Sie den Wert des select-Attributs in JavaScript festlegen können.

Von ShraddhaVeröffentlicht 2022-01-19Aktualisiert 2024-02-15

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:

Ausgewählte Optionen in JS mit der ID vorher einstellen

Setze ausgewählte Optionen in JS mit der ID nach

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:

Ausgewählte Optionen in JS mit dem Selektor vorher einstellen

Setze ausgewählte Optionen in JS mit dem Selektor nach

Über den Autor

Shraddha Paghdar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

Autorenprofil ansehen
LinkedIn