Archives

Tutoriels

Vous êtes ici : Accueil > Archives > Tutoriels > Autres langages > Basculer des valeurs entre 2 listes

< Retour
HTML et CSS
JavaScript
Caractères spéciaux
Caractères accentués
Menus déroulants .JS
Basculer entre 2 listes

Basculer des valeurs entre 2 listes

Création : 06.08.2007
Mise(s) à jour : -
Introduction
> Ce code permet, dans un formulaire HTML, de faire passer des éléments d'une première liste de type <select> à une autre liste du même type, et ce sans avoir à soumettre le formulaire à chaque ajout/retrait.
> Il est possible de faire passer des éléments d'une liste à l'autre soit en double-cliquant sur un élément, soit en sélectionnant un ou plusieurs éléments et en cliquant sur les boutons 'ajouter' ou 'retirer', soit enfin de faire passer tous les éléments d'une liste à l'autre avec les boutons 'ajouter tout' ou 'retirer tout'.
> De plus, il est possible, au sein de la liste des éléments choisis, de modifier l'ordre des valeurs à l'aide de boutons 'monter' ou 'descendre'.

Avertissement
> Ce code est une synthèse de différents codes Javascript trouvés sur/diffusés par ToutJavascript.com et JavascriptFR.com, mais qui avaient comme inconvénient majeur de ne pas être forcément compatibles avec tout les navigateurs...
> Je ne suis donc pas l'auteur de ces différents codes, je me suis contenté de les mélanger, les adapter, et de renommer les fonctions afin que leur nom soit le plus explicite possible.

Basculer des valeurs entre 2 listes

a) Compatibilité
> Ce code partiellement ré-écrit a été testé avec succès avec Firefox 2 (Windows et Mac OS X), Safari 2 (Mac OS X) et Internet Explorer versions 6 et 7 (Windows).

b) Codes sources
> Dans la partie <head>[ ... ]</head>, il faut mettre le code ci-après :

<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" );
 }
}
}
/*
deplacer_tout( liste_depart, liste_arrivee )
 Déplace depuis la liste de départ (argument 1) et à destination de la liste d'arrivée (argument 2) tous les éléments présents dans la liste de départ, en les ajoutant à la suite de ceux déjà présents dans la liste d'arrivée.
*/
 function deplacer_tout( liste_depart, liste_arrivee )
{
for( i = 0; i < liste_depart.options.length; 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 ;
}
}
/*
deplacer_hautbas( liste, sens )
 Déplace au sein de la liste (argument 1) un élément dans le sens (argument 2) voulu : -1 pour remonter, +1 pour descendre.
*/
 function deplacer_hautbas( liste, sens )
{
// init
 var listemax = liste.length - 2;
var listesel = liste.selectedIndex;
// debordement
 if( ( listesel < 0 ) || ( listesel < 1 && sens == -1 ) || ( listesel > listemax && sens == 1 ) )
{
return false;
}
// permutation
 tmpopt = new Option( liste.options[listesel+sens].text, liste.options[listesel+sens].value );
liste.options[listesel+sens].text = liste.options[listesel].text;
liste.options[listesel+sens].value = liste.options[listesel].value;
liste.options[listesel+sens].selected = true;
liste.options[listesel].text = tmpopt.text;
liste.options[listesel].value = tmpopt.value;
liste.options[listesel].selected = false;
return true;
}
/*
soumettre_2listes( liste1, liste2 )
 Au moment de la soumission du formulaire, sélectionne automatiquement toutes les valeurs des listes données dans les deux arguments, afin que les valeurs choisies soit récupérées dans le script de traitement.
*/
 function soumettre_2listes( liste1, liste2 )
{
var listelen1 = liste1.length;
for( i = 0; i < listelen1; i++ )
{
liste1.options[i].selected = true;
}
var listelen2 = liste2.length;
for( j = 0; j < listelen2; j++ )
{
liste2.options[j].selected = true;
}
}
/*
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>

> Et dans la partie <body>[ ... ]</body>, il faut mettre un formulaire auquel on associe à l'événement OnSubmit soit la fonction soumettre_1liste(), soit soumettre_2listes(), selon si l'on veut récupérer les valeurs choisies ou bien les valeurs disponibles restantes *et* celles qui sont choisies.
> Notez bien la différence de syntaxe à l'intérieur même de la balise <form> par rapport à la syntaxe dans les différents boutons.
Attention ! document.forms[0] désigne le premier formulaire de votre page/script. Si il y en plusieurs, vous devez mettre l'index qui correspond à l'ordre d'apparition des formulaires dans votre code source... En effet, dans le code d'exemple, j'ai inscrit 0, mais dans la réalité, comme j'ai un formulaire au sommet de la page de mon site, j'ai du inscrire dans le code source de mon exemple document.forms[1] pour désigner le second formulaire...
> Ensuite, il faut bien entendu mettre aussi deux listes, avec une paire de crochet dans le nom (pour dire que la variable qui en résultera sera un tableau, qui peut prendre plusieurs valeurs) et activer l'attribut HTML multiple avec la valeur "multiple" en paramètre... L'événement OnDblClick sur chaque liste est facultatif, mais permet, lorsqu'on double-clic sur une valeur, de la faire passer d'une liste à une autre.
<form name="export" method="post" OnSubmit="javascript: soumettre_1liste( document.forms[0].choix );" action="export.php">
<table summary="" border="0" cellpadding="0" cellspacing="0">
<tr>
<th style="width: 90px;"></th>
<th style="width: 220px;"></th>
<th style="width: 150px;"></th>
<th style="width: 220px;"></th>
<th style="width: 90px;"></th>
</tr>
<tr>
<td><br /></td>
<td>Champ(s) disponible(s)<br /></td>
<td><br /></td>
<td>Champ(s) sélectionné(s)<br /></td>
<td><br /></td>
</tr>
<tr>
<td><br /></td>
<td rowspan="7">
<select name="dispo[]" id="dispo" style="width: 210px;" size="16" multiple="multiple" OnDblClick="javascript: deplacer( this.form.dispo, this.form.choix );">
<option value="A">A<br /></option>
<option value="Z">Z<br /></option>
<option value="E">E<br /></option>
<option value="R">R<br /></option>
<option value="T">T<br /></option>
<option value="Y">Y<br /></option>
<option value="U">U<br /></option>
<option value="I">I<br /></option>
<option value="O">O<br /></option>
<option value="P">P<br /></option>
</select><br />
</td>
<td><br /></td>
<td rowspan="7">
<select name="choix[]" id="choix" style="width: 210px;" size="16" multiple="multiple" OnDblClick="javascript: deplacer( this.form.choix, this.form.dispo );">
</select><br />
</td>
<td><br /></td>
</tr>
<tr>
<td><br /></td>
<td><input type="button" value="ajouter >" OnClick="javascript: deplacer( this.form.dispo, this.form.choix );" /><br /></td>
<td rowspan="2"><input type="button" value="Monter" OnClick="javascript: deplacer_hautbas( this.form.choix, -1 );" /><br /></td>
</tr>
<tr>
<td><br /></td>
<td><input type="button" value="ajouter tout >>" OnClick="javascript: deplacer_tout( this.form.dispo, this.form.choix );" /><br /></td>
</tr>
<tr>
<td><br /></td>
<td><br /></td>
<td><br /></td>
</tr>
<tr>
<td><br /></td>
<td><input type="button" value="< retirer" OnClick="javascript: deplacer( this.form.choix, this.form.dispo );" /><br /></td>
<td rowspan="2"><input type="button" value="Descendre" OnClick="javascript: deplacer_hautbas( this.form.choix, 1 );" /><br /></td>
</tr>
<tr>
<td><br /></td>
<td><input type="button" value="<< retirer tout" OnClick="javascript: deplacer_tout( this.form.choix, this.form.dispo );" /><br /></td>
</tr>
<tr>
<td><br /></td>
<td><br /></td>
<td><br /></td>
</tr>
</table>
<br />
<input type="submit" value="OK" /> <input type="reset" value="Annuler" /><br />
</form>

c) Exemple
> Et voici le rendu de ce code :

 Champ(s) disponible(s)
Champ(s) sélectionné(s)























PHP

www.easyphp.org

EasyPHP

Pour installer facilement et rapidement PHP, Apache et MySQL sous Windows.
>> plus d'infos.

+ de liens

Vous voulez d'autres tutoriaux, d'autres scripts PHP ? Pas de problème, pour avoir tout ça, cliquez >> ici, et consultez aussi >> l'annuaire de liens.

Le PHP en chiffres

  • 6 des dix plus importants sites français utilisent le PHP, contre 2 l'ASP et 2 une technologie non dévoilée.
  • 1'200 fonctions, pour dessiner des images aux formats GIF ou PNG à la volée, tranformer ou créer des fichiers au format PDF, interroger des bases de données avec ou sans ODBC, sans parler de toutes les fonctions HTTP, la manipulation de tableaux, les fichiers, les fonctions mathématiques...
  • 100'000 sites en PHP en janvier 1999, contre
  • 6 millions à ce jour, le PHP ayant été lançé en version 1.0 en janvier 1994.

(source : SVM n°201 février 2002, citant Jupiter MMXI, Security-space et Netcraft)