Sujet Précédent Sujet Suivant

Basculer des elements d'une liste a l'autre

Résolu
cs_attentio Messages postés 167 Date d'inscription mardi 20 janvier 2004 Statut Membre Dernière intervention 24 mai 2010 - 8 oct. 2007 à 10:25
cs_attentio Messages postés 167 Date d'inscription mardi 20 janvier 2004 Statut Membre 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

13 réponses

Réponse 1 / 13
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
8 oct. 2007 à 12:54
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]
3
Réponse 2 / 13
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 oct. 2007 à 13:00
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 />
3
Réponse 3 / 13
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
8 oct. 2007 à 11:05
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]
0
Réponse 4 / 13
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 oct. 2007 à 11:10
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 />
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 13
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 oct. 2007 à 11:12
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 />
0
Réponse 6 / 13
cs_attentio Messages postés 167 Date d'inscription mardi 20 janvier 2004 Statut Membre Dernière intervention 24 mai 2010
8 oct. 2007 à 11:26
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
0
Réponse 7 / 13
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 oct. 2007 à 11:43
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 />
0
Réponse 8 / 13
cs_attentio Messages postés 167 Date d'inscription mardi 20 janvier 2004 Statut Membre Dernière intervention 24 mai 2010
8 oct. 2007 à 11:58
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
0
Réponse 9 / 13
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 oct. 2007 à 12:13
>> 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 />
0
Réponse 10 / 13
Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
8 oct. 2007 à 12:18
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]
0
Réponse 11 / 13
cs_attentio Messages postés 167 Date d'inscription mardi 20 janvier 2004 Statut Membre Dernière intervention 24 mai 2010
8 oct. 2007 à 12:39
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
0
Réponse 12 / 13
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 oct. 2007 à 13:08
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 />
0
Réponse 13 / 13
cs_attentio Messages postés 167 Date d'inscription mardi 20 janvier 2004 Statut Membre Dernière intervention 24 mai 2010
8 oct. 2007 à 13:19
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++
0

Discussions similaires

Liste déroulante et champ de texte
msi79 -
msi79 -

2 réponses
Liste Déroulante Garder la saisie
Cocob84 -
Cocob84 -

23 réponses
liste déroulante avec affichage du résultat sur la même page..??
lara 01 -
cgandco -

3 réponses
liste déroulante avec selected
samk28 -
samk28 -

33 réponses
liste deroulante et checkbox
Ralako -
Ralako -

8 réponses
Rejoignez-nous