Passage dans deux listes déroulante de X valeurs

**Nephtys** · 22/03/2007, 15h31

Bonjour à tous

J'espère que mon titre est assez parlant. Je n'arrive pasà résoudre ce problème alors je viens profiter de vos lumières.

Je dois affecter un suivi à une ou plusieurs personne, j'ai donc fait un input texte de recherche si il y a une seule personne, tout ça ça marche impeccable. Mais cela se complique lorsque je veux affecter mon suivi à plusieurs personnes. J'ai fais une liste déroulante avec toutes les personnes de ma base de données, et grâce à un bouton, il fait passer la personne de la liste de gauche dans une autre liste qui regroupe toutes les personnes que j'ai selectionné. (je crois qu'un screen est beaucoup plus parlant que tout ce blabla) :

Donc voila je fais passer les personnes de la liste de gauche à celle de droite

Je vous montre le code de mes deux listes :

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
 
<div id="multiple" style="display: none">
 
<b>Etape 2 : Recherche du Sportif </b>
<?
$sql="select NOM_IDENTITE from joueur";
$sqll=mysql_query($sql);
 
	$result="select NUM_IDENTITE, NOM_IDENTITE, PRENOM_IDENTITE from joueur";
	$resultatjoueur=mysql_query($result);
	$i=0;
	$var="";
?>
<br>
<form name="multisport" action="index.php?pg=ajout_suivi_accompagnement_enreg" method="POST">
<TABLE><TR>
	<TD align="center"><FONT size="2"><B>Les Sportifs</B></FONT><BR>
	<?
		echo "<SELECT name='liste1' size='30'>";
		while ($rowjoueur=mysql_fetch_array($resultatjoueur))
		{
		$id=$rowjoueur['NUM_IDENTITE'];
		$i=$i+1;
		echo "<OPTION value='".$rowjoueur['NUM_IDENTITE']."'  $var>";
		echo $rowjoueur['NOM_IDENTITE']." ".$rowjoueur['PRENOM_IDENTITE']."</OPTION>";
		}
	echo "</SELECT>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
	?>
	</TD><TD align="center">
	<INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.liste1,this.form.liste2)"><BR><BR>
	<INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer(this.form.liste2,this.form.liste1)">
	</TD><TD align="center"><FONT size="2"><B>Sportifs retenus</B></FONT><BR>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SELECT align=top name="liste2" size=10 style="width:140px">
		<OPTION value="-1">-------------------------</OPTION>
	</SELECT>
	</TD></TR></TABLE>
	<SCRIPT language="javascript">
		document.formulaire.liste2.options.length=0;
	</SCRIPT>
 
	<?
	echo "<input type='submit' name='submit' value='Valider Resultat' class='bouton' onClick='verifForm(this.form)'></form>";
	?>
</form>	
</div>

Et la fonction que j'ai utilisé :

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
<script language="javascript">
/* -------------------------- DEPLACEMENT D'UNE LISTE A L'AUTRE // RECHERCHE MULTIPLE SUIVI ACC ---------------------- */
function Deplacer(l1,l2) 
{
		if (l1.options.selectedIndex>=0) 
		{
			o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
			l2.options[l2.options.length]=o;
			l1.options[l1.options.selectedIndex]=null;
		}
		else
		{
			alert("Aucun Sportif sélectionné");
		}
	}
</script>

Ensuite après cela, je veux récupéré les valeurs de la liste de droite sur la page suivante et afficher, toutes les personnes selectionnées pour pouvoir continuer l'insertion du suivi.

Je ne vais pas vous montrer ce que j'ai tenter de faire pour récupérer ma liste2 j'ai peur de vous faire hériser les cheveux.

^^

**Auteur** · 23/03/2007, 20h18

bonjour,

Tu peux déjà jeter un coup d'oeil sur ce post.

sinon un exemple :

Code html :

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
.liste{
 width: 120px;
}
.conteneur{
 float: left;
 border: none;
 margin: 10px;
 padding: 10px;
}
 
.bouton{
  margin: 2px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
function init()
{
 initBoutons();
 initListe("liste1");
}
 
 
function initListe(idListe)
{
 var i, liste, n;
 liste = document.getElementById(idListe);
 n = liste.options.length;
 for (i=0; i<n; i++)
 {
     if (liste.options[i].selected==true)
     {
       liste.options[i].selected = false;
     }
 }
}
 
function initBoutons()
{
 document.getElementById("idAjouter").disabled = true;
 document.getElementById("idRetirer").disabled = true;
}
 
 
function listeSelect(obj)
{
  if (obj.id.toLowerCase()=="liste1")
  {
   document.getElementById("idAjouter").disabled=false;
  }
 
  if (obj.id.toLowerCase()=="liste2")
  {
   document.getElementById("idRetirer").disabled=false;
  }
}
 
function ajouteSupprime(DeLaListe, VersLaListe)
{
  var listeDep = document.getElementById(DeLaListe);
  var index = listeDep.selectedIndex;
  var texte = listeDep.options[index].text;
  var valeur = listeDep.options[index].value;
 
  var listeArr = document.getElementById(VersLaListe);
  var o = new Option(texte,valeur,"false","false");
 
  listeDep.remove(index);
  listeArr.options.add(o);
 
  initListe("liste1");
  initListe("liste2");
  initBoutons();
 
}
 
function listerJoueurs()
{
 var liste = document.getElementById("liste2");
 var n = liste.options.length;
 var infos, i;
 
 if (n<=0)
 {
  document.getElementById("listeJoueurs").innerHTML = "aucun joueur sélectionné";
 }
 else
 {
    infos = "";
    for (i=0; i<n; i++)
    {
       infos += liste.options[i].text+"<br />"
    }
   document.getElementById("listeJoueurs").innerHTML = infos;
 }
 
}
 
//-->
</script>
 
</head>
 
<body onload="init()">
 
<form>
<div class="conteneur">
  <select class="liste" size="8" id="liste1" onchange="listeSelect(this)">
      <option value="o0">Joueur 0</option>
      <option value="o1">Joueur 1</option>
      <option value="o2">Joueur 2</option>
      <option value="o3">Joueur 3</option>
      <option value="o4">Joueur 4</option>
      <option value="o5">Joueur 5</option>
      <option value="o6">Joueur 6</option>
      <option value="o7">Joueur 7</option>
      <option value="o8">Joueur 8</option>
      <option value="o7">Joueur 9</option>
  </select>
</div>
 
<div class="conteneur">
  <input class="bouton" type="button" id="idAjouter" value="Ajouter >>" onclick="ajouteSupprime('liste1','liste2')" /><br />
  <input class="bouton" type="button" id="idRetirer" value="<< Retirer" onclick="ajouteSupprime('liste2','liste1')" />
</div>
 
<div class="conteneur">
  <select  class="liste" size="8" id="liste2" onchange="listeSelect(this)">
 
  </select>
</div>
 
</form>
 
 
<!------------------------------------------------------->
<div>
<input type="button" value="Liste des joueurs sélectionnés" onclick="listerJoueurs()" />
 
  <div id="listeJoueurs">
  </div>
</div>
 
</body>
 
</html>

Passage dans deux listes déroulante de X valeurs

JavaScript

Discussions similaires

Partager

Partager