Bascule des valeurs entre 2 listes de type SELECT [Résolu]

[almoha]

Bonjour,

J'utilise un code permettant de faire passer des éléments d'une première liste de type <select> à une autre liste du même type :

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
43
44
45
46
 
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
 
/*
Codes originels © DR.
Killeak : corrections pour compatibilite avec IE 6 et 7, Firefox 2 et Safari 2.
*/
/*
  deplacer( liste_depart, liste_arrivee )
  Déplace depuis la liste de départ (argument 1) et à destination de la liste d'arrivée (argument 2) le ou les éléments sélectionnés par l'utilisateur, l'ajout se faisant à la suite des éléments déjà présents dans la liste d'arrivée.
*/
  function deplacer( liste_depart, liste_arrivee )
  {
    for( i = 0; i < liste_depart.options.length; i++ )
    {
      if( liste_depart.options[i].selected && liste_depart.options[i] != "" )
      {
        o = new Option( liste_depart.options[i].text, liste_depart.options[i].value );
        liste_arrivee.options[liste_arrivee.options.length] = o;
        liste_depart.options[i] = null;
        i = i - 1 ;
      }
      else
      {
        // alert( "aucun element selectionne" );
      }
    }
  }
 
 
/*
  soumettre_1liste( liste )
  Au moment de la soumission du formulaire, sélectionne automatiquement toutes les valeurs de la liste donnée indiquée dans l'argument, afin que les valeurs choisies soit récupérées dans le script de traitement.
*/
function soumettre_1liste( liste )
  {
    var listelen = liste.length;
    for( i = 0; i < listelen; i++ )
    {
      liste.options[i].selected = true;
    }
  }
//-->
/*]]>*/
</script>

J'ai dans ma page PHP un formulaire comportant plusieurs champs dont les 2 listes de type select et qui fait appel à la function soumettre_1liste :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<form name="export" method="post" OnSubmit="javascript: soumettre_1liste( document.forms[0].choix );" action="">
 
<!--liste de départ-->
<select name="dispo[]" id="dispo" style="width: 210px;" size="16" multiple="multiple" OnDblClick="javascript: deplacer( this.form.dispo, this.form.choix );">
<!--...options value générés dynamiquement par PHP-->
</select>
 
<!--liste de d'arrivée-->
<select name="choix[]" id="choix" style="width: 210px;" size="16" multiple="multiple" OnDblClick="javascript: deplacer( this.form.choix, this.form.dispo );">
</select>
<input type="submit" value="OK"name="btSubmit2" /> 
</form>

Le code JavaScript est fonctionnel et j'arrive à récupérer en PHP les values rapatriées dans la liste d'arrivée. Mais je butte en voulant ajouter un 2eme système de bascule entre 2 select dans mon formulaire :

Code html :

1
2
3
4
5
6
7
8
9
 
<!--liste de départ2-->
<select name="dispo2[]" id="dispo2" style="width: 210px;" size="16" multiple="multiple" OnDblClick="javascript: deplacer( this.form.dispo2, this.form.choix2 );">
<!--...options value générés dynamiquement par PHP-->
</select>
 
<!--liste de d'arrivée2-->
<select name="choix2[]" id="choix2" style="width: 210px;" size="16" multiple="multiple" OnDblClick="javascript: deplacer( this.form.choix2, this.form.dispo2 );">
</select>

Ce 2ème système de bascule fonctionne, mais lors de la soumission du formulaire je n'arrive pas à récupérer en php à la fois les values de la liste d'arrivée1 et celles de liste d'arrivée2. Étant débutant, j'ai essayé de rajouter au niveau du <form> :

Code html :

1
2
 
<form name="export" method="post" OnSubmit="javascript: soumettre_1liste( document.forms[0].choix );" OnSubmit="javascript: soumettre_1liste( document.forms[0].choix2 );"action="">

Mais cela ne marche pas : je ne récupère que les values de la liste d'arrivée1. Si je laisse que le

Code :

OnSubmit="javascript: soumettre_1liste( document.forms[0].choix2 );"

Cette fois-ci je récupère les values de la liste d'arrivée2. Mais comment faire pour récupérer les values des 2 systèmes de bascule ? Merci de votre aide.

[SpaceFrog]

un simple appandChild d'une option dans l'autre liste ...

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
function bascule(source, dest){
document.getElementById(dest).appendChild(source.options[source.selectedIndex])
}
</script>
</head>
 
<body>
<select id="one" ondblclick="bascule(this,'two')" size="9">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<select id="two" ondblclick="bascule(this,'one')" size="9"></select>

[almoha]

Merci beaucoup pour ce code J'ai fait des tests de récupération des values avec PHP, cela fonctionne en rajoutant un name[] et l'attribut "multiple" :

Code html :

<select id="two" name="choix1[]" ondblclick="bascule(this,'one')" multiple="multiple" size="9"></select>

J'aurais 2 questions complémentaires :

1) dans mon 1er code j'avais un bouton "ajouter" (pour basculer une valeur de la liste 1 vers la liste 2) et un bouton "retirer" (pour retirer une valeur de la liste 2 vers la liste 1). Comment adapter ton code pour gérer ces boutons ?

2) J'ai un code PHP qui vérifie après la soumission si tous les champs de mon formulaire ont bien été complétés ou sélectionnés. A défaut mon formulaire se réaffiche pour permettre à l'utilisateur de le compléter. Pour éviter à ce dernier de devoir recommencer la saisie et la sélection des champs, mon code permet de conserver ce qu'il vient de saisir.
Dans le système de bascule actuel, après la soumission du formulaire, les valeurs rapatriées dans la liste de droite ne sont pas conservées, ce qui obligerait l'utilisateur à refaire ses sélections en cas de formulaire incomplet. Existe-t-il un moyen de conserver l'affichage de ces valeurs après la soumission du formulaire ?
Merci pour toute aide complémentaire.

[SpaceFrog]

1) dans mon 1er code j'avais un bouton "ajouter" (pour basculer une valeur de la liste 1 vers la liste 2) et un bouton "retirer" (pour retirer une valeur de la liste 2 vers la liste 1). Comment adapter ton code pour gérer ces boutons ?

Question subsidiaire tu bascules quelle option lors du click sur le bouton ??

2) ben après soumission du formulaire les elements nécessaires ) la repartition des options son coté serveur ... gère le en php

[almoha]

1) Je voudrais basculer l'option que j'ai précédemment mise en surbrillance en la sélectionnant: je sélectionne l'option 1 dans la liste de gauche puis je clique sur le bouton "ajouter" pour la rapatrier dans la liste de droite. Même principe pour le bouton "retirer". Au final c'est le même effet que le "ondblclick" dans ton code.

2) je vais donc voir du côté du PHP concernant l'affichage des valeurs après la soumission du formulaire. Merci.

[SpaceFrog]

Pas bien compliqué, le principe reste strictement le même.

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
<script type="text/javascript">
function bascule(sel, dest){
source=document.getElementById(sel)
if(source.value==-1){return false}
document.getElementById(dest).appendChild(source.options[source.selectedIndex])
}
</script>
</head>
 
<body>
<select id="one"  size="9">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" value=">" onclick="bascule('one','two')"/>
<input type="button" value="<" onclick="bascule('two','one')"/>
<select id="two"  size="9"></select>

[almoha]

Merci beaucoup pour ton aide : cela répond absolument à ma problématique.