Discussion :

[Herode]

Bonjour à tous,

j'ai quelques opérations à faire sur des <select>, en particulier une modification du contenu de la liste déroulante. Ci-dessous deux méthodes : la première modifie le contenu de la liste sur l'évenement onclick d'un bouton associé, la seconde modifie le contenu de la liste sur l'événement onclick de la liste elle-même :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<h2>Remplissage dynamique par clic sur bouton avec nettoyage de la liste</h2>
<select id='sel1a'>
	<option value='0'>option 0</option>
	<option value='10'>ligne à supprimer</option>
</select>
<button onclick="fillSelect1a()">Remplir</button>
<script language="javascript" type="text/javascript"><!--
function fillSelect1a() {
	var sel = document.getElementById('sel1a');
	sel.options.length = 1;
	sel.options[sel.options.length] = new Option('option 1', 1);
	sel.options[sel.options.length] = new Option('option 2', 2);
	sel.options[sel.options.length] = new Option('option 3', 3);
	sel.options[sel.options.length] = new Option('option 4', 4);
}
--></script>
 
<h2>Remplissage dynamique sur événement onclick avec nettoyage de la liste</h2>
<select id='sel2b' onclick='fillSelect2b();return true'>
	<option value='0'>option 0</option>
	<option value='10'>ligne à virer</option>
</select>
<script language="javascript" type="text/javascript"><!--
function fillSelect2b() {
	var sel = document.getElementById('sel2b');
	sel.options.length = 1;
	sel.options[sel.options.length] = new Option('option 1', 1);
	sel.options[sel.options.length] = new Option('option 2', 2);
	sel.options[sel.options.length] = new Option('option 3', 3);
	sel.options[sel.options.length] = new Option('option 4', 4);
}
--></script>

Dans les deux cas, le contenu de la liste déroulante est correctement mis à jour. Cependant, si je clique sur, disons, la ligne 'option 2'
- dans le premier cas, la ligne reste sélectionnée dans la combo (comportement normal)
- dans le second cas, la sélection reste bloquée sur la première ligne...

Petit bémol sur le second cas : si je recherche quelle est la ligne sélectionnée en interceptant le onchange du <select>, je trouve bien celle contenant 'option 2'. La sélection est donc correctement transmise mais elle se perd...

Pourquoi ?

[nox75]

Ben au moment où tu cliques sur Option 2, le premier truc que tu fais dans ta fonction c'est de lui dire :
sel.options.length = 1;
Je pense que ca vient de la


Tu peux remettre ta liste proprement à 0 en utilisant cette fonction (trouvée dans la FAQ )

Code :

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

1
2
3
4
5
6
 
function raz(liste)
{l=document.formu.elements[liste].length;
for (i=l; i>=0; i--)
   document.formu.elements[liste].options[i]=null;
}

D'une maniere générale, il y a un code tres sympa sur des menus déroulants inter-dépendants qui pourra te servir. Le principe est le meme pour modifier dynamiquement ta liste

[Herode]

En fait, le problème n'est pas tout à fait là
Modifier et nettoyer une liste, pas de problème.
L'instruction

sel.options.length = 1;

avec n'importe quel chiffre à la place de 1 est d'ailleurs correcte. En tout cas, elle fonctionne depuis longtemps dans mes scripts. Je ne l'ai d'ailleurs pas inventée : j'ai trouvé l'indication dans Javascript : La Référence (Flanagan @ O'Reilly).
Cela dit, je te rassure : j'ai aussi essayé avec

sel.options[i] = null;

pour le même résultat.

Je reformule donc la question : sachant que
1 - la liste déroulante est correctement mise à jour dans les deux cas que je cite
2 - l'événement onchange du <select> me communique bien la bonne option sélectionnée dans les deux cas que je cite

pourquoi la ligne sélectionnée reste-t-elle sélectionnée dans le premier cas et pas dans le second ?

[Herode]

Ben au moment où tu cliques sur Option 2, le premier truc que tu fais dans ta fonction c'est de lui dire :
sel.options.length = 1;
Je pense que ca vient de la

Ha, j'avais zappé ça, je crois que nos divergences viennent de là.
Quand je clique sur 'option 2', j'appelle l'événement onchange du <select>. La ligne à laquelle tu fais allusion se trouve dans le gestionnaire du onclick. Celui-ci est appelé quand je clique sur le bouton fléché permettant de dérouler la liste.

[nox75]

Au temps pour moi
J'avais mal lu ton code désolé !

[nox75]

Quoique non !

Quand tu cliques sur une option (d'ailleurs tu fais comment ? j'ai du modifier le code pour cliquer sur une option, sinon ta fonction replie le menu direct Oo), le onclick est aussi appelé, donc ta fonction est appelée, elle modifie et réinitialise la liste déroulante, donc la selection n'est plus bonne.

Par contre comme le onchange est appelé avant le onclick, ton test te donne encore la bonne valeur

Test ci-dessous :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<h2>Remplissage dynamique sur événement onclick avec nettoyage de la liste</h2>
<select id='sel2b' onclick='fillSelect2b();return true' onchange='javascript:alert("change")'>
	<option value='0'>option 0</option>
	<option value='10'>ligne à virer</option>
</select>
<script language="javascript" type="text/javascript">
var test=0
function fillSelect2b() {
if (test==0) {test=1} else {test=0;return}
	var sel = document.getElementById('sel2b');
	sel.options.length = 1;
	sel.options[sel.options.length] = new Option('option 1', 1);
	sel.options[sel.options.length] = new Option('option 2', 2);
	sel.options[sel.options.length] = new Option('option 3', 3);
	sel.options[sel.options.length] = new Option('option 4', 4);
	alert("click")
}
</script>

[Herode]

Bien vu !
L'appel du onclick en complément du onchange m'avait complètement échappé. C'est logique pourtant....
Merci pour le tuyau !

[nox75]

Oui, c'est un peu fourbe effectivement
Donc au final tu vas devoir te contenter du bouton je crois

[Herode]

PS : pour ce qui est de la liste qui se rétracte, je n'ai ce problème que s'il y a des boites d'alert, sinon je les vois bien sous Firefox et Opera. Pas testé sous IE cela dit...

[nox75]

PS : pour ce qui est de la liste qui se rétracte, je n'ai ce problème que s'il y a des boites d'alert, sinon je les vois bien sous Firefox et Opera. Pas testé sous IE cela dit...

Je suis sous IE (ou plutot ma boîte est sous IE >_< ), donc méfie toi pour la suite , sous IE, ca se replie à tous les coups

[Herode]

Oui, c'est un peu fourbe effectivement
Donc au final tu vas devoir te contenter du bouton je crois

Heureusement non, l'utilisatrice du futur écran pêterait un plomb si je lui rajoutais des boutons comme ça. Je fais des mises à jour plus classiques avec des listes liées. Seulement, comme la liste que je remplis a plusieurs sources en amont, ça complique un poil le code. Enfin, c'est la vie...

[Herode]

Je suis sous IE (ou plutot ma boîte est sous IE >_< ), donc méfie toi pour la suite , sous IE, ca se replie à tous les coups

Voui. Mon client est sous FF mais de toutes façons je fais toujours de la compatibilité IE, par la force des choses, vu que ce navigateur reste majoritaire. Mais comme IE est un peu spécial (je veux dire : pas très aux normes W3C), ce sont des patchs que j'ajoute à la fin. Le code et les classes de base s'appuyent sur la norme, autant que faire se peut.