Envoi d'une liste à l'autre + possiblité de classer une liste

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 049 fois - Téléchargée 29 fois

Contenu du snippet

Aprés avoir chercher un code entier de ce type de fonctionnalité, je n'ai trouvé que des fragments de code en javascript que j'ai compilé en une page.
Ce code permet de transférer d'une liste à l'autre un ou plusieurs éléments, de tout tranférer et d'ordonner dans la liste de droite.
Copier coller ce code dans un notepad et sauvegardez ce fichier en page.htm

Source / Exemple :


<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function Deplacer(l1,l2)
{
 for (i=0; i < l1.options.length ; i++)
        {
        if (l1.options(i).selected && l1.options(i)!= "" )
         {
            // alert ("toto");
            // alert(l1.options(i).text);
            // alert(l1.options(i).value);
             o=new Option(l1.options(i).text,l1.options(i).value);
             l2.options[l2.options.length]=o;
             l1.options[i]=null;
             i = i -1 ;
          }
          else
          {
            // alert("Aucun élément sélectionné");
          }
         }
}

function DeplacerTout(l1,l2)
{
 for (i=0; i < l1.options.length ; i++)
        {

            // alert ("toto");
            // alert(l1.options(i).text);
            // alert(l1.options(i).value);
             o=new Option(l1.options(i).text,l1.options(i).value);
             l2.options[l2.options.length]=o;
             l1.options[i]=null;
             i = i -1 ;
          }
}

function menuswitch(menu, way)
{
    // Init
    var menumax = menu.length -2;
    var menusel = menu.selectedIndex;
    
    // Debordement
    if ((menusel < 0) || (menusel < 1 && way == -1) || (menusel > menumax && way == 1)) { return false; }

    // Permutation
    tmpopt = new Option( menu.options[menusel+way].text, menu.options[menusel+way].value );
    
    menu.options[menusel+way].text = menu.options[menusel].text; 
    menu.options[menusel+way].value = menu.options[menusel].value; 
    menu.options[menusel+way].selected = true;
    
    menu.options[menusel].text = tmpopt.text;                         
    menu.options[menusel].value = tmpopt.value;
    menu.options[menusel].selected = false;
    return true;
}

function menusubmit(menu1,menu2)
         {
             var menulen1 = menu1.length;
                 for (i=0; i < menulen1; i++)
                    {
                            menu1.options[i].selected = true;
                    }
             var menulen2 = menu2.length;
                 for (j=0; j < menulen2; j++)
                     {
                             menu2.options[j].selected = true;
                     }
         }
 //-->
</SCRIPT>
</head>
<body>
<FORM name="formulaire" action="page.htm" method"get" onSubmit="javascript:menusubmit(formulaire.listselect,formulaire.listunselect)">
<table border="0" cellpadding="0" cellspacing="1" width="400" height="150" bgcolor="#808080" >
  <tr>
    <td height="120" width="200">
        <select name="listunselect" multiple width="200" size="10" OnDblClick="javascript:Deplacer(this.form.listunselect,this.form.listselect)" style="width:180px;font:normal Trebuchet MS;font-size: 9px;">
            <option value="1">Element 1</option>
            <option value="2">Element 2</option>
            <option value="3">Element 3</option>
            <option value="4">Element 4</option>
            <option value="5">Element 5</option>
            <option value="6">Element 6</option>
        </select>
    </td>
    <td height="120" width="50" align="center">
    <input value="&nbsp;>&nbsp;" type="button" OnClick="javascript:Deplacer(this.form.listunselect,this.form.listselect)"><br>
    <input value="&nbsp;<&nbsp;" type="button" OnClick="javascript:Deplacer(this.form.listselect,this.form.listunselect)"><br>
    <input value=">>" type="button" OnClick="javascript:DeplacerTout(this.form.listunselect,this.form.listselect)"><br>
    <input value="<<" type="button" OnClick="javascript:DeplacerTout(this.form.listselect,this.form.listunselect)">
    </td>
    <td height="120" width="200">
    <select name="listselect" multiple size="10" width="200" OnDblClick="javascript:Deplacer(this.form.listselect,this.form.listunselect)" style="width:180px;font:normal Trebuchet MS;font-size: 9px;">
            <OPTION value="10">----------------------</OPTION>
    </select>
    
    </td>
    <td height="120" width="50" align="center">
        <input value="&nbsp;/\&nbsp;" type="button" onClick="javascript:menuswitch(this.form.listselect, -1)"><br>
    <input value="&nbsp;\/&nbsp;" type="button" onClick="javascript:menuswitch(this.form.listselect, 1)">
    </td>
  </tr>
  <tr>
    <td height="30" width="400" colspan= 4 align="center"><input name="bSave" type="submit" value="Valider" style="width:180px;font:normal Trebuchet MS;font-size: 9px;"></td>
  </tr>
</table>
  <SCRIPT language="javascript">
    // création d'une ligne pour initialiser la largeur puis suppression par ce javascript
    document.formulaire.listselect.options.length=0;
  </SCRIPT>
</form>

</body>

</html>

Conclusion :


Merci au multiple sources trouvés sur internet.

A voir également

Ajouter un commentaire

Commentaires

cs_caviar
Messages postés
329
Date d'inscription
samedi 4 janvier 2003
Statut
Membre
Dernière intervention
29 mars 2015
3 -
impec !! merci !
plus qu'à implémenter un moteur de filtrage dans la liste de gauche ;)
++
S4RuM4N
Messages postés
4
Date d'inscription
mardi 24 juin 2003
Statut
Membre
Dernière intervention
16 août 2006
-
Cool, exactement ce que je cherchait :D

en plus, il est un peu plus complet que les autres scripts que j'avais vu !


Bravo !
tembargo
Messages postés
3
Date d'inscription
vendredi 25 juin 2004
Statut
Membre
Dernière intervention
15 mars 2005
-
Simple, efficace et facile à adapter à sa sauce :)
Seul reproche, pour les tableaux : avec Firefox l'appel à "options(i)" ne fonctionne pas (sous IE, c'est ok), il remplacer les () par des [] et ça marche nikel.
Voilou. ++
thralia
Messages postés
5
Date d'inscription
mardi 16 novembre 2004
Statut
Membre
Dernière intervention
10 mai 2005
-
Merci pour cette source !!!! C'est exactement ce que jattendais. Un tel traitement n'est pas possible en asp, donc je me suis 'rabattu' sur le javascript, mais je ne regrette rien
Encore merci !
Mika
supobi
Messages postés
4
Date d'inscription
jeudi 24 juin 2004
Statut
Membre
Dernière intervention
28 juin 2004
-
Salut !

j essai d utiliser ce script pour mon site et je n arrive pas a recuperer la liste 2 sous forme de tableau ... j ai essaye de renomer la liste2 : listselect en listselect[] mais le script ne marche plus ...

je genere le code avec du php suite a un recup de donnee ds une base. Apres le Submit je doit recuperer la liste 2 et traiter chaque selection separement.

Merci pour votre aide :)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.