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 !