Formulaire : liste multiple choix "dynamiques"

Version imprimable

Bonjour à tous,
Alors je début en JS et j'ai un formulaire avec une liste multiple d'utilisateurs, et je veux qu'on puisse sélectionner divers utilisateurs et les transférer dans la liste d'à côté afin de les sélectionner.
Le souci c'est que comme je souhaite par la suite récupérer les donnés de la 2° liste, j'ai un name="autre_user_concernés[]" de type tableau, et du coup ça se corse dans le script JS, je sais pas trop comment utilisé ce tableau....
J'ai test avec [0] un peu au pif mais ça donne rien...

Voici le code :

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
 
<SCRIPT LANGUAGE="JavaScript">
	function Deplacer(l1[],l2[]) {
                var i = 0;
 
		for(i=0;i<l1[0].elements.lenght){
 
			if (l1[0].options.selectedIndex>=0) {
				o=new Option(l1[0].options[l1[0].options.selectedIndex].text,l1[0].options[l1[0].options.selectedIndex].value);
				l2[0].options[l2[0].options.length]=o;
				l1[0].options[l1[0].options.selectedIndex]=null;
			}else{
				alert("Aucun utilisateur sélectionnée");
			}
		}
	}
</SCRIPT>
 
<h4>Autres utilisateurs concernés</h4>
<TABLE>
  <TR>
    <TD align="center"><select name="autre_user[]" id="autre_user" size=5 multiple>
        <?php
    /* Construction de la première liste : on se sert du tableau PHP */
    foreach($tab as $nc => $nom)
    {
        ?>
        <option value="<?php echo($nc); ?>"><?php echo($nom); ?></option>
        <?php
    }
    ?>
      </select></TD>
    <TD align="center"><INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.autre_user[],this.form.autre_user_concernés[])">
      <BR>
      <BR>
      <INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer(this.form.autre_user_concernés[],this.form.autre_user[])"></TD>
    <TD align="center"><SELECT align=top name="autre_user_concernés[]" size=5 multiple>
      </SELECT></TD>
  </TR>
</TABLE>

Merci d'avance :)

14/08/2009, 12h54
andry.aime

Bonjour,
Pour faciliter la lecture, donne le HTML généré mais pas le code HTML.

Citation:

l1[0].elements.lenght

elements est une propriété d'un objet form mais pas pour les select.

Voici le code html généré

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h4>Autres utilisateurs concernés</h4>
<TABLE>
  <TR>
    <TD align="center"><select name="autre_user[]" id="autre_user" size=5 multiple>
                <option value="0">JEAN</option>
                <option value="1">MICHEL</option>
                <option value="2">PIERRE</option>
                <option value="3">JACK</option>
                <option value="4">SAM</option>
              </select></TD>
    <TD align="center"><INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.autre_user[],this.form.autre_user_concernés[])">
      <BR>
      <BR>
      <INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer(this.form.autre_user_concernés[],this.form.autre_user[])"></TD>
    <TD align="center"><SELECT align=top name="autre_user_concernés[]" size=5 multiple>
 
      </SELECT></TD>
  </TR>
</TABLE>

14/08/2009, 13h20
andry.aime

as-tu pris en compte l'autre remarque?

Citation:

for(i=0;i<l1[0].elements.lenght)

Code:

for(i=0;i<l1[0].options.lenght)
14/08/2009, 13h56
MasterChief78

Oui et ça ne fonctionne pas non plus :(
Que j'en sélectionne un ou plusieurs rien n'est ajouter à la 2° liste.
Déjà pourquoi [0] et pas [1] ? j'ai du mal à appréhender et à me représenster ces tableaux l1 et l2

Re,

Citation:

lenght

Code:

length

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
<html>
<head>
    <script type="text/javascript">
        function Deplacer(id1,id2) {
 obj1=document.getElementById(id1);
 obj2=document.getElementById(id2);
 var nb=0;
                for(var i=0;i<obj1.options.length;i++){
                        if (obj1.options[i].selected) {
                                o=new Option(obj1.options[obj1.options.selectedIndex].text,obj1.options[obj1.options.selectedIndex].value);
                                obj2.options[obj2.options.length]=o;
                                obj1.options[obj1.options.selectedIndex]=null;
                                nb++;
                        }
                        }
                        if(nb==0){
                                alert("Aucun utilisateur sélectionnée");
                }
        }
        </script>
</head>
<body>
 <TABLE>
  <TR>
    <TD align="center"><select name="autre_user[]" id="autre_user" size=5 multiple>
                <option value="0">JEAN</option>
                <option value="1">MICHEL</option>
                <option value="2">PIERRE</option>
                <option value="3">JACK</option>
                <option value="4">SAM</option>
              </select></TD>
    <TD align="center"><INPUT type="button" value="Ajouter >>>" onClick="Deplacer('autre_user','autre_user_concernes')"/>
      <BR>
      <BR>
      <INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer('autre_user_concernes','autre_user')"/></TD>
    <TD align="center"><SELECT align=top name="autre_user_concernes[]" id="autre_user_concernes" size=5 multiple>
 
      </SELECT></TD>
  </TR>
</TABLE>
</body>
</html>

14/08/2009, 14h57
MasterChief78

Merci beaucoup, ça marche :) enfin presque, il m'oublie certaines sélection si je prend tout un groupe, par exemple si j'en sélectionne de 1 a 3, il m'oublie la 3° de la liste, de 4 à 5 il m'oublie les deux dernières de la liste.

<comprend pas...>8O
14/08/2009, 15h15
kernelfailure

Il faut remplacer les "obj1.options.selectedIndex" par "i" ;)
14/08/2009, 15h20
MasterChief78

Merci pour ta réponse rapide et surement correct, pourtant j'ai toujours le même soucis malgré le changement

Quand on supprime une option, la longueur du select diminue.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function Deplacer(id1,id2) { obj1=document.getElementById(id1); obj2=document.getElementById(id2); var nb=0; var i=0; for(i=0;i<obj1.options.length;i++){ if (obj1.options[i].selected) { o=new Option(obj1.options[i].firstChild.nodeValue,obj1.options[i].value); obj2.options[obj2.options.length]=o; obj1.options[i]=null; i--; nb++; } } if(nb==0){ alert("Aucun utilisateur sélectionnée"); } }
il faut décrémenter i;

Citation:

obj1.options[obj1.options.selectedIndex].text

text n'est pas crossbrowser, j'ai remplacé par firstChild.nodeValue.

14/08/2009, 16h21
kernelfailure
Une autre solution consiste à traiter les options à partir de la fin.
Code:

1 2 3 4 . . . for(var i=obj1.options.length - 1; i>=0 ;i--) { etc... . . .
Si l'ordre de tri est important, il faudra penser à le ré-introduire. Cela dit, dans le cas présent, l'ordre ne semble pas avoir d'importance.
14/08/2009, 16h28
kernelfailure

Citation:

Envoyé par andry.aime

text n'est pas crossbrowser, j'ai remplacé par firstChild.nodeValue.

Il me semble que c'est plus lié à un problème d'accès suivant la version de JS.
Peux-tu nous en dire plus ? Merci.
14/08/2009, 16h28
MasterChief78

Bien vu, merci beaucoup de votre aide :)
Bonne journée
15/08/2009, 08h40
andry.aime

Citation:

Envoyé par kernelfailure

Il me semble que c'est plus lié à un problème d'accès suivant la version de JS.
Peux-tu nous en dire plus ? Merci.

Je n'ai pas le lien sur moi mais certains navigateurs ne supportent pas text mais firstChild.nodeValue est supporté par tous les navigateurs.