Modification de l'élément sélectionné dans une liste en JavaScript

Dans la leçon précédente, nous avons appris à obtenir l'élément sélectionné d'une liste. Apprenons maintenant à modifier l'élément sélectionné avec JavaScript.

Pour cela, enregistrons dans la propriété value du select la valeur de l'attribut value de l'option que nous souhaitons sélectionner.

Supposons que nous ayons le select suivant :

<select id="select">
	<option value="one">un</option>
	<option value="two" selected>deux</option>
	<option value="three">trois</option>
</select>

Supposons également qu'il y ait un bouton :

<input type="submit" id="button">

Obtenons les références vers le select et le bouton dans des variables :

let select = document.querySelector('#select');
let button = document.querySelector('#button');

Et maintenant, faisons en sorte que lors d'un clic sur le bouton, notre select change de sélection :

button.addEventListener('click', function() {
	select.value = 'one';
});

Si notre liste n'a pas d'attributs value, alors dans la propriété value du select, il faut enregistrer le texte de la balise option que nous souhaitons sélectionner.

Créez une liste déroulante avec les noms des mois. Faites en sorte que JavaScript sélectionne par défaut dans cette liste le mois en cours.