Top 3 dans select/option avec removeChild

Version imprimable

Bonjour,

alors le titre est pas clair, mais je vais essayer d'expliquer quand même.
J'ai une liste de 5 items (Whisky/Vodka/Rhum/Gin/Tequila) dans un formulaire, et je voudrais que l'internaute choisisse quel item il met en premier (apprec_un), puis en second (apprec_deux), puis en troisième (apprec_trois). Pour avoir un classement du genre :1er : la Tequila, 2nd : la Vodka, 3ème : le Whisky
Pour ça, j'ai fait 3 select identiques (à part le name, bien sûr).
Avec un onClick, je charge une fonction :
Code:

1 2 3 4 5 6 7 for (i=0;i<5;i++) { if(document.forms[0].apprec_un.options[i].selected == true) { document.forms[0].apprec_deux.options[i].style.display = 'none'; document.forms[0].apprec_trois.options[i].style.display='none'; } }
Ca marche dans FF, mais pas dans IE.
Pourquoi ?
J'suis pas sûr que le display: none; supprime l'élément du DOM.
Donc j'ai essayé une autre approche avec removeChild et la fonction suivante :
Code:

1 2 3 4 5 6 7 8 9 for (i=0;i<5;i++) { if(document.forms[0].apprec_un.options[i].selected == true) { var noeud = document.forms[0].apprec_deux.options[i]; document.forms[0].apprec_deux.removeChild(noeud); var noeud = document.forms[0].apprec_trois.options[i]; document.forms[0].apprec_trois.removeChild(noeud); } }
Mais là, ça marche pas du tout... et le message d'erreur par Firebug est incompréhensible...
Est-ce que quelqu'un peut m'expliquer comment débloquer la situation. D'avance merci.

Salut,
un truc plus portable (tu peux aussi utiliser init pour construire dynamiquement les select) :

Code:

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
<script>
 
function init(s)	{
	var items = new Array('a', 'b', 'c');
	while(s.hasChildNodes())	{
		s.removeChild(s.childNodes[0]);
	}
	for(i = 0; i < items.length; i++)	{
		var opt = document.createElement('option');
		opt.value = items[i];
		opt.innerHTML = items[i];
		s.appendChild(opt);
	}
}
 
function update(s1Id, s2Id)	{
	var s1 = document.getElementById(s1Id);
	var s2 = document.getElementById(s2Id);
	init(s2);
	s2.removeChild(s2.options[s1.selectedIndex]);
}
</script>
<select id="s1" onChange="update(this.id, 's2')">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
 
<select id="s2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

Bye

04/05/2007, 19h56
artxtra

Bon, on va tester tout ça...

Ca marche, merci... mais avec 2 select...
Comment rajouter le 3ème ?