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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 259 fois - Téléchargée 30 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 2
12 sept. 2007 à 12:12
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
30 avril 2005 à 10:53
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
15 mars 2005 à 00:42
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
17 févr. 2005 à 13:25
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
25 juin 2004 à 16:49
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 :)
Afficher les 6 commentaires

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.