Discussion :

[Philippe Dpt35]

Bonjour,

ma page html comporte une liste déroulante de sélection déclarée par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select id="liste-echelons" name="liste-echelons" onchange="creeExercice('liste-echelons')"></select>

dont les options sont complétées par une routine javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var echelons = document.getElementById("liste-echelons");
  for(var i=0; i < listeEchelons.length ; i++) {
    echelons.length++;
    echelons.options[echelons.length-1].text = listeEchelons[i];
  }

Cette liste fonctionne parfaitement, sauf lorsque je veux sélectionner le premier élément de la liste. Je peux me placer dessus, mais un clic n'a aucun effet.
Lorsque je donne une taille size='2' à ma liste, là ça fonctionne correctement.

Qu'est-ce qui m'échappe ?

[Invité]

Bonjour,

1- Généralement, on met une 1ère option "vide" :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<option value="">...</option>

ou

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<option value="0">Sélectionnez...</option>

A mon avis, c'est ce qui te manque.

2- De plus, il serait plus judicieux de déclarer/définir aussi la "value", en plus du "text", car ils peuvent être différents.
Ex. :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
var listeEchelons = [
  {'txt':'...', 'val':'0'},
  {'txt':'choix 1', 'val':'1'},
  {'txt':'choix 2', 'val':'2'},
  {'txt':'choix 3', 'val':'3'},
];
var echelons = document.getElementById("liste-echelons");
for(var i=0; i < listeEchelons.length ; i++) {
  echelons.length++;
  echelons.options[echelons.length-1].text = listeEchelons[i].txt;
  echelons.options[echelons.length-1].value = listeEchelons[i].val;
}

Ce qui donne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<select id="liste-echelons" name="liste-echelons" onchange="creeExercice('liste-echelons');">
   <option value="0">...</option>
   <option value="1">choix 1</option>
   <option value="2">choix 2</option>
   <option value="3">choix 3</option>
</select>

[Philippe Dpt35]

1- Généralement, on met une 1ère option "vide" :

Merci pour ta réponse.
J'avais pensé à cette solution pour résoudre le problème et vais donc me résoudre à l'utiliser si c'est la seule solution.

C'est ce comportement curieux de la liste déroulante qui m'intrigue, car si on lui fait afficher plus d'un élément avec l'option size, ça fonctionne !

L'option value m'est inutile, car je n'ai besoin que de l'indice de l'élément sélectionné, celui-ci renvoyant à un tableau avec ce même indice au sein d'un tableau double entrée.

[Philippe Dpt35]

Après réflexion, cela s'explique si l'on considère que l'on a délibérément choisi de permettre un intitulé neutre non sélectionnable dans le cas où il n'y a qu'une seule ligne d'affichée.
Auquel cas l'utilisation de cet intitulé neutre est un passage obligé.