JavaScript Modifier l'option sélectionnée

Dans l’article d’aujourd’hui, nous allons apprendre à changer l’option sélectionnée de l’élément Select en JavaScript.

Modifier l’option sélectionnée en JavaScript

JavaScript fournit une méthode intégrée Document querySelector() qui renvoie l’élément principal à l’intérieur du document qui correspond au sélecteur ou à l’ensemble de sélecteurs souhaité. Null est renvoyé si aucune correspondance n’est trouvée.

Syntaxe:

querySelector(selectors)

selectors est une chaîne qui est un paramètre obligatoire. Cette chaîne contient un ou plusieurs sélecteurs qui doivent correspondre.

Cette chaîne doit être une chaîne de sélecteur CSS valide ; sinon, une exception SyntaxError est levée. Pour plus d’informations sur les sélecteurs et comment les gérer, voir .querySelector().

Cette méthode JavaScript renvoie un objet Element représentant le premier élément du document qui correspond à l’ensemble spécifié de sélecteurs CSS ou renvoie null s’il n’y a pas de correspondance.

Comprenons-le avec un exemple.

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

L’exemple ci-dessus a défini la liste déroulante select pour sélectionner l’emplacement préféré. Supposons que l’emplacement préféré par défaut soit Mumbai.

Grâce à la méthode querySelector(), nous pouvons définir la valeur sélectionnée sur true et sélectionner l’emplacement par défaut sur goa. L’attribut sélectionné accepte une valeur booléenne.

Exécutez l’extrait de code ci-dessus dans n’importe quel navigateur prenant en charge JavaScript, en affichant le résultat ci-dessous.

Production:

Démo