Définir l'option sélectionnée dans JavaScript

1. Définir l’élément de sélection à l’aide de document.getElementById() dans JavaScript
2. Définir l’élément de sélection à l’aide de document.querySelector() dans JavaScript

select est un élément d’entrée HTML qui spécifie la liste des options déroulantes parmi lesquelles l’utilisateur peut choisir n’importe quelle option. Dans l’article d’aujourd’hui, nous allons apprendre à définir la valeur de cet élément HTML en JavaScript.

Définir l’élément de sélection à l’aide de document.getElementById() dans JavaScript

Cette méthode document intégrée fournie par JavaScript renvoie l’objet élément dont id correspond à l’id spécifié. La valeur réelle est définie par la ligne element.value = 'NEW_VALUE'.

Syntaxe

document.getElementById($id);

Paramètre

$id : C’est un paramètre obligatoire qui spécifie l’$id d’un attribut HTML qui doit correspondre.

Valeur de retour

Renvoie l’objet élément DOM correspondant si l’élément correspondant est trouvé ; sinon, il renvoie null.

Exemple de code :

<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>

Production :

Définir l’élément de sélection à l’aide de document.querySelector() dans JavaScript

Il s’agit d’une méthode document intégrée fournie par JavaScript et qui renvoie l’objet élément dont le sélecteur correspond au sélecteur spécifié. La seule différence entre querySelector() et querySelectorAll() est que le premier est un objet d’élément correspondant unique, puis tous les objets de l’élément correspondant sont renvoyés. Si un sélecteur invalide est passé, une SyntaxError est émise. La valeur réelle est définie par la ligne element.value = 'NEW_VALUE'

Syntaxe

document.querySelector($selector);

Paramètre

$selector : c’est un paramètre obligatoire qui spécifie la condition de correspondance de class ou id. Cette chaîne doit être une chaîne de sélection CSS valide.

Valeur de retour

Renvoie le premier objet élément correspondant qui remplit la condition de sélecteur dans le DOM.

Exemple de code :

<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>

Production :