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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 016 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

Commenter la réponse de apxa

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.