Formulaire : liste multiple choix "dynamiques"

**MasterChief78** · 14/08/2009, 12h29

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 :

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

**andry.aime** · 14/08/2009, 12h54

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

l1[0].elements.lenght

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

**MasterChief78** · 14/08/2009, 13h13

Voici le code html généré

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

**andry.aime** · 14/08/2009, 13h20

as-tu pris en compte l'autre remarque?

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

Code :

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

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

**MasterChief78** · 14/08/2009, 13h56

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

**andry.aime** · 14/08/2009, 14h19

Re,

lenght

Code :

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

length

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

Formulaire : liste multiple choix "dynamiques"

JavaScript

Vue hybride

Discussions similaires

Partager

Partager