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>

**MasterChief78** · 14/08/2009, 14h57

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

**kernelfailure** · 14/08/2009, 15h15

Il faut remplacer les "obj1.options.selectedIndex" par "i"

**MasterChief78** · 14/08/2009, 15h20

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

**andry.aime** · 14/08/2009, 15h26

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

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

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

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

**kernelfailure** · 14/08/2009, 16h21

Une autre solution consiste à traiter les options à partir de la fin.

Code :

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

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.

**kernelfailure** · 14/08/2009, 16h28

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.

**MasterChief78** · 14/08/2009, 16h28

Bien vu, merci beaucoup de votre aide

Bonne journée

**andry.aime** · 15/08/2009, 08h40

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.

Formulaire : liste multiple choix "dynamiques"

JavaScript

Discussions similaires

Partager

Partager