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

**Fiosi** · 31/08/2007, 00h02

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

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
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.

**jypees** · 31/08/2007, 14h25

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 :

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
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

**Fiosi** · 01/09/2007, 00h04

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.

**Fiosi** · 01/09/2007, 00h09

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

Code :

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

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

en précisant bien sûr en amont les valeurs de "valeurls1".

**jypees** · 01/09/2007, 00h11

non non, tu veux ajouté quoi exactement?

dis le moi je te montrerais

**Fiosi** · 04/09/2007, 00h14

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

Code :

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

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...

**Fiosi** · 24/09/2007, 23h11

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

Envoyé par jypees

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 :

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
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

**belocom** · 25/09/2007, 01h16

Merci Jypees ! Super

**SpaceFrog** · 25/09/2007, 08h48

Envoyé par Fiosi

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

Code :

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

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

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

JavaScript

Discussions similaires

Partager

Partager