HOWTO · JavaScript

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

Dans l'article d'aujourd'hui, nous allons apprendre comment vous pouvez définir la valeur de l'attribut select en JavaScript.

Par ShraddhaPublié 2022-01-19Mis à jour 2024-02-15
Sur cette page

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 les options sélectionnées dans JS en utilisant id avant

définir les options sélectionnées dans JS en utilisant id après

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 :

définir les options sélectionnées dans JS à l’aide du sélecteur avant

définir les options sélectionnées dans JS à l’aide du sélecteur après

À propos de l’auteur

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.

Voir le profil de l’auteur
LinkedIn