CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 12 11:46:07

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Formulaire

> ENVOI D'UNE LISTE À L'AUTRE + POSSIBLITÉ DE CLASSER UNE LISTE

ENVOI D'UNE LISTE À L'AUTRE + POSSIBLITÉ DE CLASSER UNE LISTE

Information sur la source

Note :

9,75 / 10

Catégorie :Formulaire Niveau :Initié Date de création :16/04/2004 Vu :7 804

Auteur : jdenoeud

Ecrire un message privé

Commentaire sur cette source (6)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

<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=" > " type="button" OnClick="javascript:Deplacer(this.form.listunselect,this.form.listselect)"><br>
<input value=" < " 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=" /\ " type="button" onClick="javascript:menuswitch(this.form.listselect, -1)"><br>
<input value=" \/ " 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>

<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.

Sources de la même categorie

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol

PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim

GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom

RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

Toutes les sources de la catégorie Formulaire

Commentaires et avis

Commentaire de apxa le 19/04/2004 11:06:49

salut,
l'inconveniant de new Option c'est que sous mac ca délire et ca pete les tables.

Commentaire de supobi le 25/06/2004 16:49:35

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 :)

Commentaire de thralia le 17/02/2005 13:25:13

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

Commentaire de tembargo le 15/03/2005 00:42:14

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. ++

Commentaire de S4RuM4N le 30/04/2005 10:53:37

Cool, exactement ce que je cherchait :D

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

Bravo !

Commentaire de caviar le 12/09/2007 12:12:20

impec !! merci !
plus qu'à implémenter un moteur de filtrage dans la liste de gauche ;)
++

Ajouter un commentaire

Nos sponsors

Derniers Blogs

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

Forum

BANDEAU DéFILANT MOOTOOLS.JS ET HISTORIQUE DE NAVIGATION par cocolafleche

RE : RéCUPéRER LA VALEUR D'UNE VARIABLE PHP POUR L'UTILISER EN JAVASCRIPT par stealone

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning