Supprimer des valeurs dans un select multiple

Signaler
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
24 mai 2010
-
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
bonjour j'ai probleme avec une fonction JS. voila elle etait censé boucler pour supprimer tout les valeurs mais voila ca ne marche pas
par contre si je boucle pour selectionner toutes les valeur ca marche tres bien .. je ne comprends pas pourquoi
si j'ai  ...


Code :

<ol class= "olcode" id="code1">
<li><select multiple>
</li>
<li><option value="01">01</option>
</li>
<li><option value="02">02</option>
</li>
<li><option value="03">03</option>
</li>
<li><option value="04">04</option>
</li>
<li></select></li>
</ol>



les boites d'alerte vont me donner si je mets simplement   l1.options[i].selected="selected";
alert > 01
alert > 01 non
alert > 02
alert > 02 non
alert > 03
alert > 03 non
alert > 04
alert > 04 non
... ca marche tres bien  !!!
 
par contre si j'ajoute la lign suivante l1.options[i] =null;
ca me donne ...
alert > 01
alert > 02 non
alert > 03
alert > 04 non
et la moitié des valeurs n'a pas été supprimer
 
je ne comprends pas pourquoi ...
 
voici mon code complet ...


Code :

<ol class="olcode" id="code2">
<li>var l1 = document.getElementById('liste2');
</li>
<li>
for (var i=0; i < l1.options.length; i++){
</li>
<li>alert(l1.options[i].value );
</li>
<li>
</li>
<li>

// ca marche

</li>
<li>  l1.options[i].selected="selected";
</li>
<li>
</li>
<li>

// ca marche pas

</li>
<li>l1.options[i]=null;
</li>
<li>
</li>
<li>alert(l1.options[i].value + ' non');
</li>
<li>}</li>
</ol>



 
merci de votre aide

8 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
l'affectation de nul à l'option ne la supprime pas
...

Pour supprimer physiquement l'option il te faut utiliser la méthode removeChild
exemple :




//----------------




function Destroy(){
  var Obj = document.getElementById('liste2');
  for (var i=0; i < Obj.options.length-1; i++){
    Obj.removeChild( Obj.options[i]);
    i--; // OBLIGATOIRE de decrementer i l'option n'existant plus, il faut revenir en arrière sinon on n'en detruit qu'un sur deux
  }
}


voila mais il y a plus radical mais moins DOM...



//----------------


function Destroy(){

  var Obj = document.getElementById('liste2');




  Obj.innerHTML = "";
}


;0)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
Bonjour,
    je préfère utiliser length.... mais chacun ses goûts !

<select multiple id="toto">
   <option value="hein">un</option>
   <option value="de">deux</option>
   <option value="trou à">trois</option>
   <option value="cat">quatre</option>
</select>

<script type="text/javascript">
    document.getElementById("toto").length=0;
</script>

<hr />                Cordialement            Bul        
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
24 mai 2010

J'ai essayé, ca ne marche pas ! le script fait planter ma page
petite precision ma fonction doit vider ce select mais injecter les valeurs suprimés
dans un autre select "liste1".
C pour ça que j'avais pensé a ceci :
il selectionne la premiere valeur, il l'injecte dans la liste1 (l2) puis efface la valeur selectionné puis selectionne la deuxieme valeur etc etc ...

  var l1 = document.getElementById('liste2');
  var l2 = document.getElementById('liste1');
 for (var i=0; i < l1.options.length; i++){
   alert(l1.options[i].value );
   l1.options[i].selected="selected";
  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.length].selected.length=0;
  alert(l1.options[i].value + ' non');
}

merci encore de votre aide
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
>>j'ai essayé, ca ne marche pas ! le script fait planter ma page
    tu causes à qui ?
    si c'est 0 moi, si, si, mon exemple fonctionne et sans planter
    et je parierais bien la même chose pour ce que propose PetoelTeam !
    à priori, tu n'appliques pas comme il faut

>>petite precision ma fonction doit vider ce select mais injecter les valeurs
>>suprimées dans un autre select "liste1".
    ah... la question est différente !

    un  tout ch'tit exemple d'utilisation ici




<hr />                Cordialement            Bul        
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
24 mai 2010

désolé bultez ... vraiament toutes les excuses  j'avais oublié de renommer ma variable

j'ai fait ceci ...
  for (var i=0; i < l1.options.length; i++){
 l1.options[i].selected="selected";
 o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
 l2.options[l2.options.length]=o;  
    l1.removeChild( l1.options[i]);
    i--;  }

et ca marche tres bien !
et document.getElementById("liste2").length=0; marche très bien aussi

par contre j'ai un autre petit soucis lorsque je réinjecte les valurs dans la "liste 1"(l2) il me les places bien entendu a la fin du select hors je souhaiterais que mes option s'organise en fonction de leur valeurs 

ex : si j'ai 



<ol>
<li><select multiple name="liste1">
</li>
<li><option value="01">01</option>
</li>
<li><option value="03">03</option>
</li>
<li><option value="04">04</option>
</li>
<li></select> </li>
</ol>
 


<ol>
<li><select multiple name="liste2"> 
</li>
<li><option value="02">02</option>
</li>
<li></select>

et que je veux envoyer la valuer 02 dans la liste 1, il va se placer à la fin hors je voudrais qu'il se place entre 01 et 03.
Comment pourrais-je m'y prendre
</li>
</ol>
merci encore infiniment
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
>>>...qu'il se place entre 01 et 03.
            Comment pourrais-je m'y prendre



    [codes/TRAITEMENTS-SUR-SELECT_27983.aspx un  tout ch'tit exemple d'utilisation ici]




<hr />                Cordialement            Bul        
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
24 mai 2010

aie ... aie  ... aie !!!
je m'en sort pas ! je n'arrive pas a ordonner les elements de liste 1 tel qu'ils  le sont pas defaut ...
je ne sais pas trop comment m'y prendre
voici mon code si vous arrivez à vous y retrouver :

====================================
  var l1 = document.getElementById('liste2');
  var l2 = document.getElementById('liste1');



  for (var i=0; i < l1.options.length; i++){
 
// on selectionne les un apres les autres les elements de la liste2
 l1.options[i].selected="selected";
 
// on bascule l'element de la liste 2 vers la liste1
 o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value); 




/////////////////////////////////////////////// A REVOIR//////////////////////////////////
//on place l'element dans la liste1 par ordre numerique

var tmp=l1.options[i].value.toLowerCase();
 var pos;
// on boucle
 for (var n=0;n<l2.length;n++)
      { 
   pos=l2.options[n].value;
if ( pos >= tmp )
   {     
   l2.options[l2.options.length]=o;
// on deselectionne l'element ajouté dans la liste1  
 o.selected="selected";
   //l2.selectedIndex=n;
   //n=l2.length;        
    } }


///////////////////////////////////////////////////////////////////////////////////////////

// on supprime l'element ajouté dans la liste2

l1.removeChild( l1.options[i]);




// on deselectionne l'element ajouté dans la liste1 1
o.selected="";
    i--;
 }
====================================

merci encore pour votre aide
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
c'est plus un problème d'algo que de javascript, non ?

ch'tit exemple ?

on classe en fonction de .text,
si existe déjà : on remplace,
liste1 et liste2 plusieurs lignes possibles,
mit un onchange dans liste1 pour vérifier,
   


à toi d'adapter si nécessaire








    et d'ailleurs pourquoi mettre .value et .text égaux ?

    et surtout égaux à selectedIndex+1 finalement ?

    ce doit être pour l'exemple.... j'espère



brut de fonderie... on doit pouvoir largement améliorer/simplifier ! ( doux euphémisme )

si j'ai parfaitement compris le but de la manoeuvre


pas testé réellement/totalement ! à vérifier  !

<select multiple id="liste1"
onchange="alert(this.options[this.selectedIndex].value+'/'+this.options[this.selectedIndex].text);">
    <option value="un">01</option>
    <option value="trois">03</option>
    <option value="quatre">04</option>
</select>
<select multiple id="liste2">
    <option value="zéro">00</option>
    <option value="deux">02</option>
    <option value="trois modifié">03</option>
    <option value="dix">10</option>
</select>
<script type="text/javascript">
    var l2=document.getElementById("liste2");
    var l1=document.getElementById("liste1");
    function met(ou,quoi)
    {   l1.length++;
        for ( var n3 = l1.length-1; n3>ou; n3-- )
        {   l1.options[n3].value=l1.options[n3-1].value;
            l1.options[n3].text=l1.options[n3-1].text;
        }
        l1.options[ou].value=l2.options[quoi].value;
        l1.options[ou].text=l2.options[quoi].text;
    }
    for ( var n2 = 0; n2 < l2.length; n2++ )
    {   trv=false;
        for ( var n1 = 0; n1 < l1.length; n1++ )
        {    if ( l2.options[n2].text < l1.options[n1].text )
                    {   met(n1,n2);
                        n1=l1.length;
                        trv=true;
                    }
            else     {  if ( l2.options[n2].text == l1.options[n1].text )
                        {   l1.options[n1].value = l2.options[n2].value;
                            l1.options[n1].text = l2.options[n2].text;
                            n1 = l1.length;
                            trv=true;
                        }
                    }
        }
        if (!trv) met(n1,n2);
    }
    l2.length=0;
</script>

<hr />                Cordialement            Bul