Numéro de l'élément sélectionné d'une liste déroulante
Les sélecteurs possèdent une propriété spéciale
selectedIndex, qui stocke le numéro
de l'élément de la liste actuellement sélectionné.
La numérotation commence à zéro. Cette
propriété peut être à la fois lue
et écrite, permettant de changer l'élément sélectionné dans la liste.
Examinons le fonctionnement de cette propriété avec un exemple. Supposons que nous ayons la liste déroulante suivante :
<select id="select">
<option value="one">un</option>
<option value="two" selected>deux</option>
<option value="three">trois</option>
</select>
Affichons le numéro de l'élément de liste sélectionné :
let select = document.querySelector('#select');
console.log(select.selectedIndex); // affichera 1
Maintenant, sélectionnons un autre élément :
let select = document.querySelector('#select');
select.selectedIndex = 2; // sélectionnera 'trois'
Étant donné un champ de saisie et un sélecteur. Un nombre est saisi dans le champ de saisie. Lors de la perte du focus, rendez l'élément de la liste sélectionné dont le numéro est égal à la valeur du champ de saisie.
Créez une liste déroulante avec les noms des jours de la semaine. Faites en sorte que via JavaScript le jour actuel soit sélectionné par défaut dans cette liste.