Basculer des elements d'une liste a l'autre [Résolu]

Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Dernière intervention
24 mai 2010
- 8 oct. 2007 à 10:25 - Dernière réponse :
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Dernière intervention
24 mai 2010
- 8 oct. 2007 à 13:19
Bonjour,

voila j'ai un script qui me permet de basculer des elements d'une liste a l'autre, ca fonctionne mais je voudrais utilser non pas le nom mais l'ID de chaque select
car pour recuperer l'ensemble des elements envoyés sur ma page de traitement j'ai besoin de mettre comme nom "liste2[]" et non pas "liste2".




-----------------------------------------------------------------------------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "JavaScript">



 function Deplacer(l1,l2) {
  if (l1.options.selectedIndex>=0) {
   o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
   l2.options[l2.options.length]=o;
   l1.options[l1.options.selectedIndex]=null;
  }else{
   alert("Aucune activité sélectionnée");
  }
 }
</SCRIPT>
</HEAD>




<form name="formulaire"action="formulaire_annonce.php" method="post" enctype="multipart/form-data" >

 <TD align="center"> Activités proposées

 <SELECT align =top name= "liste1" ID="id_liste1" size=6  style="width:120px">
  <OPTION value="100">Allemagne</OPTION>
  <OPTION value="101">Autriche</OPTION>
  <OPTION value="102">Espagne</OPTION>
  <OPTION value="103">France</OPTION>
  <OPTION value="104">Italie</OPTION>
  <OPTION value="105">Le reste du monde</OPTION>
 </SELECT>
 </TD>
 <TD align="center">
 >>" onClick="Deplacer(this.form.liste1,this.form.liste2)">
 

 
 </TD>
 <TD align="center"> Pays retenus

 <SELECT align =top name="liste2"  ID="id_liste2" size=6 style="width:120px">
  <OPTION value="10">----------------------</OPTION>
 </SELECT>
 </TD>
 </TR></TABLE>
 
</FORM>
</HTML>
-----------------------------------------------------------------------------------



je ne sais pas trop comment m'y prendre

merci de votre aide
Afficher la suite 

Votre réponse

13 réponses

Meilleure réponse
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Dernière intervention
20 février 2017
- 8 oct. 2007 à 12:54
3
Merci
Donc, on parle d'une nouvelle méthode alors ( youpi, je commence à me réveiller un peu ) :

<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">

/**
* Déplacement
*
* @param _idListe1
*                Identifiant de la première liste.
* @param _idListe2
*                Identifiant de la deuxième liste.
*/
function Deplacer(_idListe1, _idListe2) {
  var l1 = document.getElementById(_idListe1);
  var l2 = document.getElementById(_idListe2);
  if (l1.options.selectedIndex>=0 ) {
       o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
       l2.options[l2.options.length]=o;
       l1.options[l1.options.selectedIndex]=null;
  }
  else{
   alert("Aucune activité sélectionnée");
  }
 }
 
 function submitForm ( _idListe ){
    var liste1 =  document.getElementById(_idListe );
    // si une seule ligne  ( alors pas de pays ) vue que la liste contient "----------------------";
    if ( liste1.options.length ==1 ) {   
            alert ("Merci de renseigné un pays de destination");
            return false;
    }
    // parcours tous les options de la liste.
    var listeValue = "";
    for (var i=0; i < liste1.options.length; i++){
       listeValue += ";" + liste1.options[i].value;
    }
    // juste une alerte.
    listeValue = listeValue.substr(1, listeValue.length);
    alert (listeValue);
    return true;
}
</SCRIPT>
</HEAD>

<form name="formulaire" method="post" enctype="multipart/form-data" >

  Activités proposées

 <SELECT align=top id="liste1" size=6  style="width:120px">
  <OPTION value="100">Allemagne</OPTION>
  <OPTION value="101">Autriche</OPTION>
  <OPTION value="102">Espagne</OPTION>
  <OPTION value="103">France</OPTION>
  <OPTION value="104">Italie</OPTION>
  <OPTION value="105">Le reste du monde</OPTION>
 </SELECT>
 ,
  >>" onClick="Deplacer('liste1','liste2')">
 

 
 ,
 Pays retenus

 <SELECT align=top name="valeurs[]" id="liste2" size=6 multiple="multiple" style="width:120px">
  <OPTION value="10">----------------------</OPTION>
 </SELECT>
 ,
 

 
 
</FORM>
</HTML>

un truc comme ça alors ?

[o-_-o]

Merci Zobibol 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 88 internautes ce mois-ci

Commenter la réponse de Zobibol
Meilleure réponse
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Dernière intervention
15 octobre 2013
- 8 oct. 2007 à 13:00
3
Merci
function tout()
{    var s=document.formulaire["valeurs[]"];
    for ( var l=0;l<s.length;l++ )
    {    s.options[l].selected="selected";    }
    return true;
}

<form name="formulaire" method="post"
    onsubmit="tout();"
    action="page php qui traitera">

avec l'aide de Zobibol, on va y arriver !

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />

Merci cs_bultez 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 88 internautes ce mois-ci

Commenter la réponse de cs_bultez
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Dernière intervention
20 février 2017
- 8 oct. 2007 à 11:05
0
Merci
Salut je sais pas si j'ai tout compris fort probable que non mais :

function Deplacer(_idListe1, _idListe2) {
    var l1 = document.getElementById(_idListe1);
    var l2 = document.getElementById(_idListe2);
    if (l1.options.selectedIndex>=0) {
       o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
       l2.options[l2.options.length]=o;
       l1.options[l1.options.selectedIndex]=null;
  }else{
   alert("Aucune activité sélectionnée");
  }
 }

et ensuite sur les appels de déplacer :
    onClick="Deplacer('liste1','liste2')"
et vice et versa.

non ?
[o-_-o]
Commenter la réponse de Zobibol
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Dernière intervention
15 octobre 2013
- 8 oct. 2007 à 11:10
0
Merci
Bonjour,

    ID et NAME ne sont pas obligatoirement égaux.

<form   name= "formulaire"action="formulaire_annonce.php"
            method="post" enctype="multipart/form-data" >
 <TD align="center"> Activités proposées

     <SELECT align ="top" name="liste[]" ID="liste1" size=6  style="width:120px">

     <SELECT align="top" name="liste[]" ID="liste2" size=6 style="width:120px">



    et on uttilise   document.getElementById("liste1")  
    ou                    document.formulaire["liste[]"][0]

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />
Commenter la réponse de cs_bultez
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Dernière intervention
15 octobre 2013
- 8 oct. 2007 à 11:12
0
Merci
comme traitement en php, il vaudrait probablement mieux    :



<SELECT align="top" name="liste1[]" ID="liste1" size=6  style="width:120px">


<SELECT align="top" name="liste2[]" ID="liste2" size=6 style="width:120px">





    et on uttilise   document.getElementById("liste1")  
    ou                    document.formulaire["liste1[]"]






<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />
Commenter la réponse de cs_bultez
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Dernière intervention
24 mai 2010
- 8 oct. 2007 à 11:26
0
Merci
merci pour ces reponses !
mes données sont en effet envoyé en php mais j'e suis un peu novice en JS et j'ai quelques difficutés
j'ai fait ceci :

 >>" onClick= "Deplacer(document.formulaire["liste1[]"],document.formulaire["liste2[]"])">
 

 
 </TD>
 <TD align="center"> Pays retenus

 <SELECT align =top name="liste2[]" size=6 style="width:120px">
 

mais ca ne marche pas !

merci encore de votre aide
Commenter la réponse de cs_attentio
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Dernière intervention
15 octobre 2013
- 8 oct. 2007 à 11:43
0
Merci
et pourtant...

<script type= "text/javascript">
    function Deplacer(a,b)
    {    alert(a.length+"\t"+b.length);    }
</script>
<form name="formulaire">
 >>" onClick='Deplacer(document.formulaire["liste1[]"],document.formulaire["liste2[]"])'>
 <SELECT align=top name="liste1[]" size=6 style="width:120px">
        <option>1
        <option>2
    </select>
 <SELECT align=top name="liste2[]" size=6 style="width:120px">
        <option>3
    </select>
</form>

ça baigne.

mais tu fais :



onClick="Deplacer(document.formulaire["liste1[]"],document.formulaire["liste2[]"])">






les navigateurs se pomment






onClick ='Deplacer(document.formulaire["liste1[]"],document.formulaire["liste2[]"]);'
ça devrait aller mieux.
tu n'utilises pas un éditeur de texte à coloration syntaxique ?
avec NotePad++, on voit tout de suite ( des " en rouge, signe d'erreur )






<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />
Commenter la réponse de cs_bultez
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Dernière intervention
24 mai 2010
- 8 oct. 2007 à 11:58
0
Merci
je viens d'essayer la technique de Zobibol, ca marche sauf que je suis obligé de reselectionner l'ensemble des elements de la liste2 pour les envoyer vers ma page de traitement.
moi ce que je voudrais C vraiment pouvoir envoyer l'integralité des elements de la liste 2, qu'ils soit selectionnés ou non.
comment porrais je faire pour remedier a cela ?

<?php
print_r($_POST);
?>
<HTML><HEAD>
<SCRIPT LANGUAGE= "JavaScript">




function Deplacer(_idListe1, _idListe2) {
    var l1 = document.getElementById(_idListe1);
    var l2 = document.getElementById(_idListe2);
    if (l1.options.selectedIndex>=0) {
       o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
       l2.options[l2.options.length]=o;
       l1.options[l1.options.selectedIndex]=null;
  }else{
   alert("Aucune activité sélectionnée");
  }
 }
</SCRIPT>
</HEAD>





<form name="formulaire" method="post" enctype="multipart/form-data" >





  Activités proposées

 <SELECT align =top id="liste1" size=6  style="width:120px">
  <OPTION value="100">Allemagne</OPTION>
  <OPTION value="101">Autriche</OPTION>
  <OPTION value="102">Espagne</OPTION>
  <OPTION value="103">France</OPTION>
  <OPTION value="104">Italie</OPTION>
  <OPTION value="105">Le reste du monde</OPTION>
 </SELECT>
 ,
  >>" onClick="Deplacer('liste1','liste2')">
 

 
 ,
 Pays retenus

 <SELECT align=top name="valeurs[]" id="liste2" size=6 multiple="multiple" style="width:120px">
  <OPTION value="10">----------------------</OPTION>
 </SELECT>
 ,
 

 
 
</FORM>
</HTML>



merci encore de votre aide
Commenter la réponse de cs_attentio
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Dernière intervention
15 octobre 2013
- 8 oct. 2007 à 12:13
0
Merci
>> reselectionner l'ensemble des elements de la liste2 pour les envoyer vers ma page de traitement
    oui. ne sont envoyés que les option sélectionnés.
    fait un boucle pour sélectionner toutes les lignes avant l'envoi.
    le select.options[index].selected=true; ou "selected"; je ne sais plus


<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />
Commenter la réponse de cs_bultez
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Dernière intervention
20 février 2017
- 8 oct. 2007 à 12:18
0
Merci
Heu, toujours moi qui comprends toujours rien... ;o)
Bon, pour savoir le bouton "enlever", vide complètement la liste ( pas uniquement la ligne sélectionnée ) ?
Si tel est le cas il suffit d'integrer un booleen à la méthode Déplacer :
/**
* Déplacement
*
* @param _idListe1
*                Identifiant de la première liste.
* @param _idListe2
*                Identifiant de la deuxième liste.
* @param _clear
*                booleen doit on vider la liste complète ?
*/
function Deplacer(_idListe1, _idListe2, _clear) {
  var l1 = document.getElementById(_idListe1);
  var l2 = document.getElementById(_idListe2);
  if (l1.options.selectedIndex>=0 && !_clear) {
       o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
       l2.options[l2.options.length]=o;
       l1.options[l1.options.selectedIndex]=null;
  }
  else if ( l1.options.selectedIndex>=0 && _clear){
      while (l1.options.length>0){
           o=new Option(l1.options[0].text,l1.options[0].value);
       l2.options[l2.options.length]=o;
       l1.options[0]=null;
      }
  }
  else{
   alert("Aucune activité sélectionnée");
  }
 }

sur "Ajouter" : onclick ="Déplacer( <gras>'liste1','liste2', false)"</gras>
sur "Enlever" : onclick ="Déplacer('liste2','liste1', true)"

Mais comme je ne sais pas si c'est ce qui est demander....


[o-_-o]
Commenter la réponse de Zobibol
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Dernière intervention
24 mai 2010
- 8 oct. 2007 à 12:39
0
Merci
merci zobibol pour ta reponse, mais j'ai du mal m'exprimer dans ma question, ... C pas l'ensemble des elements de la liste droite que je veux supprimer.
c'est que le problème qui se pose C que on doit pouvoir faire basculer les elements des deux listes sans probleme dans les deux sens (comme CT avant)
mais le soucis, C que si veux envoyer la liste des pays selectonné par l'internaute (qui'il a placé dans la liste 2) alors il est obliger de reselectionner l'ensemble des elements de la liste2 (ce qui parait compliquer a l'utilisation) donc l'ideal serait peut-être comme le proposait bultez de selectionner l'ensemble des elements quand on clique sur le bouton envoyer mais je n'y arrive pas

merci encore
Commenter la réponse de cs_attentio
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Dernière intervention
15 octobre 2013
- 8 oct. 2007 à 13:08
0
Merci
ah ne tiens... on s'est croisés d'ailleurs.
    il n'a pas tort de contrôler si des options existent
    ( peut-être l'option 0 ne sert à rien, ou il faut
          commencer la sélection à l'index 1 )
    je préfère utiliser onsubmit... mais bof...
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
<hr />
Commenter la réponse de cs_bultez
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Dernière intervention
24 mai 2010
- 8 oct. 2007 à 13:19
0
Merci
Super merci merci et encore merci a tout les deux de m'avoir epaulé et d'avoir pris le tps de comprendre !!
Vous etes des amours

A++
Commenter la réponse de cs_attentio

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.