Passer les données d'un "select" à l'autre

Version imprimable

Bonjour à tous,
J'ai récupéré ce script pour pouvoir passer les données d'un <select> à un autre :

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
34
35
 
<html><head>
<script language="javascript">
// On stocke les éléments dans un tableau
var ls1=new Array("Alain","Brice","Charles","Denis","Emile","Fernand","Gérard","Hector");
var ls2=new Array();
// La fonction qui déplace de l'un à l'autre
function deplace(sens){
s1=document.frm.l1.selectedIndex; // Pour simplifier les écritures
s2=document.frm.l2.selectedIndex; // ci-dessous ;)
if(((sens=="1")&&(s1<0))||((sens=="2")&&(s2<0))){alert("Sélectionnez un élément du bon côté");sens="0";}
if(sens=="1"){ls2[ls2.length]=ls1[s1];ls1.splice(s1,1);} // Ajout et suppression
if(sens=="2"){ls1[ls1.length]=ls2[s2];ls2.splice(s2,1);} // Ajout et suppression
ls1.sort();ls2.sort(); // Tri des tableaux
}
// La fonction qui actualise l'affichage
function actu(){
      t="<select name='l1' size="+ls1.length+">"
      for(i=0;i<ls1.length;i++)
         t+="<option>"+ls1[i]+"</option>";
      document.frm.l1.outerHTML=t+"</select>";
      t="<select name='l2' size="+ls2.length+">"
      for(i=0;i<ls2.length;i++)
         t+="<option>"+ls2[i]+"</option>";
      document.frm.l2.outerHTML=t+"</select>";
}
</script>
</head>
<body onLoad="actu()">
<form name="frm"><table><tr>
<td valign=top><select name="l1"></select></td>
<td><a href="javascript:deplace(1);actu();">>></a><br><br><a href="javascript:deplace(2);actu();"><<</a></td>
<td valign=top><select name="l2"></select></td>
</tr></table></form>
</body></htmL>

Tout fonctionne parfaitement sur Explorer. Mais rien ne s'affiche dans les select sur firefox.

Quelqu'un a-t-il une idée ? Je m'arrache les cheveux !
Merci d'avance.

Bien à vous.

Je sais pas ou tu es pris ce code mais il est mauvais. Son code est pas presenté pour etre lu. Bref du mauvais code. Je l'ai repris et remanier (correction plus indentation) afin qu'il fonctionne. Voici ce que cela donne :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<html>
	<head>
		<script language="javascript">
		// On stocke les éléments dans un tableau
		var ls1=new Array("Alain","Brice","Charles","Denis","Emile","Fernand","Gérard","Hector");
		var ls2=new Array();
		// La fonction qui déplace de l'un à l'autre
		function deplace(sens)
		{
			s1=document.frm.l1.selectedIndex; // Pour simplifier les écritures
			s2=document.frm.l2.selectedIndex; // ci-dessous ;)
			if(((sens=="1")&&(s1<0))||((sens=="2")&&(s2<0)))
			{
				alert("Sélectionnez un élément du bon côté");sens="0";
			}
			if(sens=="1")
			{
				ls2[ls2.length]=ls1[s1];ls1.splice(s1,1);
			} // Ajout et suppression
			if(sens=="2")
			{
				ls1[ls1.length]=ls2[s2];ls2.splice(s2,1);
			} // Ajout et suppression
			ls1.sort();
			ls2.sort(); // Tri des tableaux
		}
		// La fonction qui actualise l'affichage
		function actu()
		{
			while (document.frm.l1.length)
				document.frm.l1.options[0] = null;
			while (document.frm.l2.options.length)
				document.frm.l2.options[0] = null;			
 
			document.frm.l1.size = ls1.length;
			for(i=0;i<ls1.length;i++)
			{
				new_element = new Option(ls1[i]);
                document.frm.l1.options[document.frm.l1.length] = new_element;
			}
			document.frm.l2.size = ls2.length;
			for(i=0;i<ls2.length;i++)
			{
				new_element = new Option(ls2[i]);
                document.frm.l2.options[document.frm.l2.length] = new_element;
			}
		}
		</script>
	</head>
	<body onLoad="actu()">
		<form name="frm">
			<table>
				<tr>
					<td valign=top>
						<select name="l1"></select>
					</td>
					<td>
						<a href="javascript:deplace(1);actu();">>></a>
						<br><br>
						<a href="javascript:deplace(2);actu();"><<</a>
					</td>
					<td valign=top>
						<select name="l2"></select>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

La partie qui s'occupe de reconstruire les options etaient degeulasses j'ai donc utilisé les vrais methodes du js :)

Voila j'attends tes differents commentaires !!! A bientoooot :king::roll:

01/09/2007, 00h04
Fiosi

Impeccable !

En effet, c'est beaucoup plus clair. Et ça a le mérite de fonctionner parfaitement sur les deux navigateurs. Merci beaucoup !

Je ne connaissais pas la fonction "Option" dans javascript. J'ai lu qu'on pouvait lui adjoindre plusieurs paramètres : le premier celui du texte, le deuxième la valeur. Je vais rajouter ce deuxième paramètre.
Encore merci pour cette réponse.
01/09/2007, 00h09
Fiosi

Au fait...

J'imagine que pour rajouter le 2e paramètre à Option, il suffit simplement de rajouter dans le code :

Code:

new_element = new Option(ls1[i],valeurls1[i]);

en précisant bien sûr en amont les valeurs de "valeurls1".
01/09/2007, 00h11
jypees

non non, tu veux ajouté quoi exactement? :roll: dis le moi je te montrerais ;)
04/09/2007, 00h14
Fiosi
En HTML, pour <SELECT>, on peut ajouter des <OPTION> du style :
Code:

1 2 3 4 5 6 <SELECT> <OPTION value="valeur1">l'intitulé 1 de l'option <OPTION value="valeur2">l'intitulé 2 de l'option ... <OPTION value="valeurN">l'intitulé N de l'option
Je voudrais donc rajouter la valeur (value) dans le script que tu m'as corrigé, en plus de l'intitulé. Si je me fais bien comprendre...

Je complique un peu la donne :
Comment faire lorsque le premier <select> est dans un popup ou un iframe ???
Ca me semble impossible........

Citation:

Envoyé par jypees

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<html>
	<head>
		<script language="javascript">
		// On stocke les éléments dans un tableau
		var ls1=new Array("Alain","Brice","Charles","Denis","Emile","Fernand","Gérard","Hector");
		var ls2=new Array();
		// La fonction qui déplace de l'un à l'autre
		function deplace(sens)
		{
			s1=document.frm.l1.selectedIndex; // Pour simplifier les écritures
			s2=document.frm.l2.selectedIndex; // ci-dessous ;)
			if(((sens=="1")&&(s1<0))||((sens=="2")&&(s2<0)))
			{
				alert("Sélectionnez un élément du bon côté");sens="0";
			}
			if(sens=="1")
			{
				ls2[ls2.length]=ls1[s1];ls1.splice(s1,1);
			} // Ajout et suppression
			if(sens=="2")
			{
				ls1[ls1.length]=ls2[s2];ls2.splice(s2,1);
			} // Ajout et suppression
			ls1.sort();
			ls2.sort(); // Tri des tableaux
		}
		// La fonction qui actualise l'affichage
		function actu()
		{
			while (document.frm.l1.length)
				document.frm.l1.options[0] = null;
			while (document.frm.l2.options.length)
				document.frm.l2.options[0] = null;			
 
			document.frm.l1.size = ls1.length;
			for(i=0;i<ls1.length;i++)
			{
				new_element = new Option(ls1[i]);
                document.frm.l1.options[document.frm.l1.length] = new_element;
			}
			document.frm.l2.size = ls2.length;
			for(i=0;i<ls2.length;i++)
			{
				new_element = new Option(ls2[i]);
                document.frm.l2.options[document.frm.l2.length] = new_element;
			}
		}
		</script>
	</head>
	<body onLoad="actu()">
		<form name="frm">
			<table>
				<tr>
					<td valign=top>
						<select name="l1"></select>
					</td>
					<td>
						<a href="javascript:deplace(1);actu();">>></a>
						<br><br>
						<a href="javascript:deplace(2);actu();"><<</a>
					</td>
					<td valign=top>
						<select name="l2"></select>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

La partie qui s'occupe de reconstruire les options etaient degeulasses j'ai donc utilisé les vrais methodes du js :)

Voila j'attends tes differents commentaires !!! A bientoooot :king::roll:

25/09/2007, 01h16
belocom

Merci Jypees ! Super
25/09/2007, 08h48
SpaceFrog
Citation:
Envoyé par Fiosi

En HTML, pour <SELECT>, on peut ajouter des <OPTION> du style :

Code:

1 2 3 4 5 6 <SELECT> <OPTION value="valeur1">l'intitulé 1 de l'option <OPTION value="valeur2">l'intitulé 2 de l'option ... <OPTION value="valeurN">l'intitulé N de l'option

Je voudrais donc rajouter la valeur (value) dans le script que tu m'as corrigé, en plus de l'intitulé. Si je me fais bien comprendre...
Pense à fermer les balises option