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

Commenter

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

S'inscrire maintenant

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.