éléments déplaçables entre deux listes

**The SorroW** · 19/06/2007, 12h10

Bonjour j'ai un petit souci avec des listes déplaçables. Je viens juste de rajouter une liste déroulante de clients (premier select) et la je ne peux plus déplacé d'éléments entre les deux listes.

Avec la console de Debug de JavaScript j'obtiens le message d'erreur suivant l2.options has no properties. Je ne comprend pas en quoi la liste déroulante que j'ai rajouté pose problèmes. Merci de votre aide par avance. Voici le code

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
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
<script language="javascript"  type="text/javascript">
 
<!-- script de deplacement entre listes -->
function Deplacer(l1,l2) 
{
alert(l1);
alert(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 groupe n\'a été sélectionné");	}
}
 
 
function DeplacerTout(l1,l2)
{
for (i=0; i < l1.options.length ; i++)
        {
 
             o=new Option(l1.options(i).text,l1.options(i).value);
             l2.options[l2.options.length]=o;
             l1.options[i]=null;
             i = i -1 ;
          }
}
 
<!-- script de selection auto de tout le contenu d'une liste -->
function PostSelect(liste)
{
  // On compte le nombre d'item de la liste select
  NbCol1 = document.forms[liste].elements[9].length;
  // On lance une boucle pour selectionner tous les items
  for (a = 0; a < NbCol1; a++)
  { document.forms[liste].elements[9].options[a].selected = true;  }
}
</script>
 
 
<form name="form1" method="post" action="utilisateur_valider.php">
 
<fieldset>
<legend>Créer un utilisateur</legend>
 
<p>Client : 		
  <select name="client" size="1" id="client">
  <option value="" selected>Choisissez un client</option>
	<?php
	//----- boucle d'affichage de la liste déroulante des clients -----
	//---- si on est sur la page de creation d'une facture ou devis on affiche que les clients non supprimés -------
	$req_cli = mysql_query ("SELECT * FROM cwfact_clients ORDER BY societe,contact");						
	while ($res_cli = mysql_fetch_array($req_cli))
	{	
	  	if($res_cli["contact"] != "") { $contact = "[".stripslashes($res_cli["contact"])."]"; }
	  	else { $contact = ""; }
	  	echo '<option value="'.$res_cli["id_client"].'">'.stripslashes($res_cli["societe"])." ".$contact.'</option>';	
	}
	?>
  </select>
</p>
 
<p>Nom d'utilisateur : <input name="user" type="text" size="40" /></p>
<p>Mot de passe : <input name="pass1" type="password" size="12" /></p>
<p>Retapez le mot de passe : <input name="pass2" type="password" size="12" /></p>
 
<hr />
 
<h2>Groupes auxquels a appartient cet utilisateur :</h2>
 
<div id="transfertliste">
<table>
  <tr><td width="40%">Groupes disponibles</td><td width="20%">&nbsp;</td><td width="40%">Groupes choisis</td></tr>
  <tr>
 	<td>
	<select name="liste1" size="10" OnDblClick="Deplacer(this.form.liste1,this.form.elements[9])" id="liste1">
	<?php
	//----- boucle d'affichage de la liste des groupes ---------
	$req_groupe = mysql_query("SELECT * FROM cwadm_groupes ORDER BY groupe");
	while ($res_groupe = mysql_fetch_array($req_groupe))
	{	echo '<option value="'.$res_groupe["id_groupe"].'">'.$res_groupe["groupe"].'</option>';	}
	?>
	</select>
	</td>
	<td>
	<p><input type="button" value=" > " onClick="Deplacer(this.form.liste1,this.form.elements[9])"  title="Ajouter un groupe" /></p>
 
	<p><input type="button" value=" < " onClick="Deplacer(this.form.elements[9],this.form.liste1)"   title="Retirer un groupe"/></p>
 
    <p><input type="button" value=">>" OnClick="DeplacerTout(this.form.liste1,this.form.elements[9])"  title="Ajouter tous les groupes"/></p>
 
	<p><input type="button" value="<<" onClick="DeplacerTout(this.form.elements[9],this.form.liste1)"  title="Retirer tous les groupes"/></p>
 
 
	</td>
	<td>
	<select name="liste2[]" size="10" multiple OnDblClick="Deplacer(this.form.elements[9],this.form.liste1)">
	</select>
	<a href="#" onClick="javascript:PostSelect('form1')"><p class="info">Cliquez ici pour tout sélectionner</p></a>
	</td>
  </tr>
</table>
</div>
 
</fieldset>
 
</form>

**E.Bzz** · 19/06/2007, 12h32

Bonjour,

Code :

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

OnDblClick="Deplacer(this.form.liste1,this.form.elements[9])"

N'utilise pas les indices des éléments pour y faire référence : pb en perspective.
Donne un ID à tes select et utilise

Code :

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

document.getElementById('id_select')

pour y accéder ...
La logique ID est à utiliser de manière générale pour faire référence aux objets de la page ...

A+

**Malarkey** · 19/06/2007, 13h41

Oui, E.Bzz a raison. J4ai modifier ton code ainsi, et ça fonctionne bien de mon coté. Je n'ai pas tout modifié, car il faut bien que tu finisses ton travail

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
<select name="liste1" size="10" OnDblClick="Deplacer(this,document.getElementById('liste2'))" id="liste1">
<?php
//----- boucle d'affichage de la liste des groupes ---------
$req_groupe = mysql_query("SELECT * FROM cwadm_groupes ORDER BY groupe");
while ($res_groupe = mysql_fetch_array($req_groupe))
{ echo '<option value="'.$res_groupe["id_groupe"].'">'.$res_groupe["groupe"].'</option>'; }
?><option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
</td>
<td>
<p><input type="button" value=" > " onClick="Deplacer(this.form.liste1,this.form.elements[9])" title="Ajouter un groupe" /></p>

<p><input type="button" value=" < " onClick="Deplacer(this.form.elements[9],this.form.liste1)" title="Retirer un groupe"/></p>

<p><input type="button" value=">>" OnClick="DeplacerTout(this.form.liste1,this.form.elements[9])" title="Ajouter tous les groupes"/></p>

<p><input type="button" value="<<" onClick="DeplacerTout(this.form.elements[9],this.form.liste1)" title="Retirer tous les groupes"/></p>


</td>
<td>
<select name="liste2[]" id="liste2" size="10" multiple OnDblClick="Deplacer(this,document.getElementById('liste2'))">
</select>

Par ailleurs, je crois que tu n'as pas bien saisi le role du this. C'est une fonction qui englobe tous les attributs et valeurs de l'objet courant. ainsi, si tu as :

Code :

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

<select name="nomdemonselect" id="monselect" value="10" onchange="ma_fonction(this);">

Alors le this represente tout ton select. Ainsi, this.value sera égal à 10, this.id, à monselect, this.name à nomdemonselect etc etc...

**E.Bzz** · 19/06/2007, 14h34

Envoyé par yohan22

Par ailleurs, je crois que tu n'as pas bien saisi le role du this. C'est une fonction qui englobe tous les attributs et valeurs de l'objet courant.

C'est l'objet courant ...

**Malarkey** · 28/06/2007, 11h16

Envoyé par E.Bzz

C'est l'objet courant ...

Oui, je susi complètement d'accord

Mais, je sais pas si la notion d'objet était bien intégrée pour l'utilisateur, et comme un objet n'est en faite qu'un ensemble de fonction...

Mais merci pour la correction!

**The SorroW** · 19/06/2007, 14h09

Merci pour vos conseils je crois que je vais faire comme çà car çà foncionne pas mal. Merci pour vos conseils et à bientot

éléments déplaçables entre deux listes

JavaScript

Vue hybride

Discussions similaires

Partager

Partager