2 listes liées (choix multiples) [Résolu]

cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention - 22 févr. 2007 à 10:50 - Dernière réponse : cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention
- 23 févr. 2007 à 00:56
Je cherche à faire disparaître et à faire ré-apparaître dynamiquement des éléments d'une optgroup d'une liste en fonction d'une autre liste.


Exemple : Lorsqu'on clique sur une ou plusieurs fonction(s) la liste des Contacts se raffraichit pour ne laisser que les contacts ayant cette ou ces fonction(s) !


1) liste des contacts organisées par différents groupes :


ListeContacts :
Membre du bureau
Client
Visiteur
...


Liste des fonctions  organisées par différents groupes :
Poste de Direction
Marketing
...




Il y a un début de code mais je ne sais pas si je suis sur la bonne piste !


voir le script : OptGroup1 de PetoleTeam en bas de page


Questions :


Peut-on griser l'élément séléctionné plutôt que de l'effacer ?


Sinon j'ai essayé de le faire disparaître totalement, mais je m'embrouille (voir le script : Optgroup5) !


D'avance merci.


Cdt,
Fabiano13


============================================


<select class="TypeInput" id="MailingListeContacts" style="WIDTH: 300px; HEIGHT: 114px" align="top" multiple size="6" name="MailingListeContacts">


<optgroup id="Groupe_1" label="Membre du bureau">
<option id="14" value="145">Fabien Rimbot</option>
<option id="17" value="17">Daniel Caseau</option>
<option value="187">Jean-Pierre Mazard</option>
</optgroup>


<optgroup label="Client">
<option value="11">Bilot</option>
<option value="23">Cahut</option>
<option value="15">Matoko</option>
<option value="91">Toti</option>
<option value="115">Liones</option>
<option value="54">Zanub</option>
<option value="120">Monoba</option>
<option value="401">Tuto</option>
<option value="751">Zikari</option>
<option value="842">Zondi</option>
</optgroup>


<optgroup label="Visiteur">
<option value="1233">Toto</option>
<option value="1246">Titi</option>
<option value="1559">Tata</option>
</optgroup>




</select>






<select class="TypeInput" id="MailingListeFonction" style="WIDTH: 300px; HEIGHT: 114px" align="top" multiple size="6" name="MailingListeFonction">


<optgroup label="Poste de Direction">
<option value="14">Président directeur général</option>
<option value="25">Directeur général</option>
<option value="37">Gérant</option>
</optgroup>


<optgroup label="Marketing">
<option value="88">Directeur marketing</option>
<option value="47">Chef produits</option>
<option value="53">Assitant(e)</option>
</optgroup>


</select>




[# Fabien]

[# Daniel]




<script type="text/javascript">


function Optgroup5(sIdLabel,sIdGroupe){
  var sLabel = document.getElementById(sIdLabel);
  var sOptGroupe = document.getElementById(sIdGroupe);
if (sLabel!=null){
if(!sLabel.Sauve){
  sLabel.Sauve2 = sLabel.id;
  sLabel.Sauve = sLabel.text; // sauve le texte initial
  sLabel.Sauve3 = sLabel.value;
  sOptGroupe.Sauve4 = sOptGroupe.id;
  SauvegardeTexte = sLabel.Sauve
  SauvegardeId = sLabel.Sauve2
  SauvegardeValue = sLabel.Sauve3
  SauvegardeOptGroupe = sOptGroupe.Sauve4
  sLabel.outerHTML=null;
}
}else{
  objOption1=document.createElement("option")
  objOption1.innerHTML = SauvegardeTexte
  objOption1.value = SauvegardeValue
  objOption1.id = SauvegardeId
  sOptGroupe.appendChild(objOption1) 
}


}




// Solution proposée par "PetoleTeam (www.javascriptfr.com)"  : http://www.javascriptfr.com/infomsg_APPARAITRE-OU-DISPARAITRE-DYNAMIQUEMENT-VALEURS-OPTGROUP_892133.aspx
// Mais cela efface la ligne mais ne la fait pas disparaitre !


function OptGroup1(id_){
  var q=document.getElementById(id_);
  if(!q.Sauve) q.Sauve = q.text; // sauve le texte initial
  if(q){
    if( q.text == ''){ // si text effacé
      q.text=q.Sauve;  // on le restaure
      q.disabled = false;
    }
    else{
     q.text='';        // sinon on l'efface
     q.disabled = true;
    }
  }
}


</script>
Afficher la suite 

Votre réponse

19 réponses

Meilleure réponse
cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention - 23 févr. 2007 à 00:27
3
Merci
J'ai trouvé. C'est label à la place de id !

Merci pour ton aide !

Codialement,
Fabiano13

<HTML>
<HEAD>
<TITLE></TITLE>
<script type= "text/javascript">
           
function hide(_id, _type,_ids){
    var ctrl = document.getElementById(_id);
    if ( ctrl.listChilds == null){
            ctrl.listChilds = new Array();
            var ctrlsChilds = ctrl.getElementsByTagName("OPTGROUP");
            for ( var i = 0; i < ctrlsChilds.length; i++){
                    var clone = ctrlsChilds[i].cloneNode(true);
                    clone._id = clone.id;
                    clone.id =null;
                    var childs = clone.getElementsByTagName ("OPTION");
                    for ( var j = 0;  j< childs.length; j++){
                            childs[j]._id = childs[j].id;
                            childs[j].id = null;
                    }
                    ctrl.listChilds.push (clone );
            }
    }
    var typeObj = ctrl.getElementsByTagName (_type);
    for ( var i =0 ; i < _ids.length; i++){
        for ( var j = 0; j < typeObj.length; j++){
            if ( typeObj[j]. label == _ids[i] ){
                    typeObj[j].parentNode.removeChild ( typeObj[j] );
            }
        }
    }
}


function showAll (_id ){
    var ctrl = document.getElementById(_id);
    // réinitialise le composant.
    ctrl.innerHTML = "";
    // ajoute tous ces fils
   
    for ( var i = 0; i < ctrl.listChilds.length; i++){
             var ret = ctrl.appendChild ( ctrl.listChilds[i]) ;
            // réattribut l'id
            ret.id = ret._id;
            // fais de même pour ces fils
            for ( var j = 0; j < ret.childNodes.length; j++){
                if ( ret.childNodes[j]._id != null )
                    ret.childNodes[j].id = ret.childNodes[j]._id;
            }
    }
    ctrl.listChilds = null;
}


function Trier(){
var selectione="";
for (i=0; i<document.getElementById('sel').options.length; i++) {
  if (!document.getElementById('sel').options[i].selected ) {
      selectione += "'" + document.getElementById('sel').options[i].label + "',";
  }
}
var sSelection = selectione.substr(0,selectione.length - 1)
var ctrl = document.getElementById('sel0');
if ( ctrl.listChilds != null){
showAll('sel0')
}
hide('sel0','OPTION',eval("[" + sSelection + "]"))
}
</script>
</HEAD>

<select onchange="Trier();" size=16 id="sel" multiple>
    <optgroup id="g1" label="un" style="background-color:#FFFFAA">
        <option label="a1" id="a" style="background-color:#FFFFAA">a</option>
        <option label="b1" id="b" style="background-color:#FFFFAA">b</option>
    </optgroup>
    <optgroup   id="g2" label="deux" style="background-color:#AAFFFF">
        <option label="c1" id="a" style="background-color:#AAFFFF">c</option>
        <option label="d1" id="a" style="background-color:#AAFFFF">d</option>
        <option label="e1" id="a" style="background-color:#AAFFFF">e</option>
        <option label="f1" id="a" style="background-color:#AAFFFF">f       </option>
    </optgroup>
    <optgroup   id="g3" label="trois" style="background-color:#FFAAFF">
        <option label="g1" id="a" style="background-color:#FFAAFF">g</option>
        <option label="h1" id="a" style="background-color:#FFAAFF">h</option>
        <option label="i1" id="a" style="background-color:#FFAAFF">i</option>
    </optgroup>
</select>


<select size=16 id="sel0" multiple>
    <optgroup  id="g10" label="un" style="background-color:#FFFFAA">
        <option label="b1" id="a1" style="background-color:#FFFFAA">a</option>
        <option label="a1" id="b1" style="background-color:#FFFFAA">b</option>
    </optgroup>
    <optgroup   id="g20" label="deux" style="background-color:#AAFFFF">
        <option label="a1" id="c1" style="background-color:#AAFFFF">c</option>
        <option label="c1" id="d1" style="background-color:#AAFFFF">d</option>
        <option label="b1" id="e1" style="background-color:#AAFFFF">e</option>
        <option label="a1" id="f1" style="background-color:#AAFFFF">f       </option>
    </optgroup>
    <optgroup   id="g30" label="trois" style="background-color:#FFAAFF">
        <option label="a1" id="g1" style="background-color:#FFAAFF">g</option>
        <option label="d1" id="h1" style="background-color:#FFAAFF">h</option>
        <option label="a1" id="i1" style="background-color:#FFAAFF">i</option>
    </optgroup>
</select></HTML>

Merci cs_fabiano13 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 95 internautes ce mois-ci

Commenter la réponse de cs_fabiano13
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 22 févr. 2007 à 11:15
0
Merci
Bonjour,

    pour cacher/montrer
         avec FireFox ( et consors ) "il suffit" de faire
                document.getElementById("id de optgroup").style.display= "none" ou "inline"
    ça semble ne pas fonctionner pas avec IE ?

    pour supprimer, un ch'tit exemple :

<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
    var ie false;    /*@cc_on    ie true;    @*/

function enlever(quoi)
{
    var q=document.getElementById(quoi);
    if (q) 
    {   
        if ( ie)    {
                        q.outerText=null;    //     ou q.outerHTML
                    }
        else        {
                        q.innerHTML=null;
                        q.label=null;
                    }
    }
}
</script>
</HEAD>

<select size=16
        id="sel">
    <optgroup    id="g1" label="un" style="background-color:#FFFFAA">
        <option>a
        <option>b
    </optgroup>
    <optgroup     id="g2" label="deux" style="background-color:#AAFFFF">
        <option>c
        <option>d
        <option>e
        <option>f       
    </optgroup>
    <optgroup     id="g3" label="trois" style="background-color:#FFAAFF">
        <option>g
        <option>h
        <option>i
    </optgroup>
</select>
enlever "deux"

</HTML>

<hr />


Cordialement            Bul         [mon Site]     [=Bul M'écrire]  




<hr />
Commenter la réponse de cs_bultez
cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention - 22 févr. 2007 à 11:21
0
Merci
Mais comment le faire ré-apparaître a ça place ?

Vois l'exemple (OptGroup1) qui supprime et fait ré-apparaître le texte mais ne supprime pas la ligne comme tu le fait dans ton exemple. Peut-on mixer les deux script ?

D'avance merci.
Fabiano13

function OptGroup1(id_){
  var q=document.getElementById(id_);
  if(!q.Sauve) q.Sauve = q.text; // sauve le texte initial
  if(q){
    if( q.text == ''){ // si text effacé
      q.text=q.Sauve;  // on le restaure
      q.disabled = false;
    }
    else{
     q.text='';        // sinon on l'efface
     q.disabled = true;
    }
  }
}
Commenter la réponse de cs_fabiano13
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 22 févr. 2007 à 11:38
0
Merci
ah, c'est vrai, j'ai oublié qu'il fallait remettre...
à mon humble avis, passer par ce qui est ...Child
( appendChild, removeChild, insertBefore... )
<hr />


Cordialement            Bul         [mon Site]     [M'écrire]  




<hr />
Commenter la réponse de cs_bultez
Zobibol 469 Messages postés mercredi 9 janvier 2002Date d'inscription 20 février 2017 Dernière intervention - 22 févr. 2007 à 12:31
0
Merci
Bien le bonjour, je suis donc repartis de ce qu'a fait Bultez... et de l'idée des removeChilds, insertBefore....
et du coup je suis arrivé sur une nouvelle piste ( qui semble donner de bon résultat...)
ci-joint le code:

<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">

        function enlever(quoi, ou)
        {   
                // si toute fois il éxiste un option groupe de caché ( display none ) stocké dans la variable removeSel du body
                // alors on le remontre ( au cas ou )
                if ( document.body.removeSel != null )
                    remettre (ou);
                // récupère tous les optgroup du sel
                var optGroups = document.getElementById("sel").getElementsByTagName ("OPTGROUP");
                for ( var i =0; i < optGroups.length; i++){
                        if ( optGroups[i].id == quoi ){
                             // le stock dans le body
                           document.body.removeSel = document.getElementById(quoi);
                           // stock l'index dans une variable du body.
                           document.body.removeSel.indexPos = i;
                           // l'enlève
                           document.getElementById(ou).removeChild ( document.body.removeSel );
                           return;
                        }
                }
       
        }
       
        /**
        * Réaffiche le contrôle caché
        * @param ou
        *                id du sel auquel remettre le block caché
        */
        function remettre (ou){
            // parcours les fils ( optGroup du select ) jusqu'à l'index du dernier enlevé.
            var optGroups = document.getElementById("sel").getElementsByTagName ("OPTGROUP");
            var i= 0;
            while ( i <document.body.removeSel.indexPos)
                i++;
       
            document.getElementById(ou).insertBefore(document.body.removeSel, optGroups[i]);
        }

</script>
</HEAD>

<select size=16
        id="sel">
    <optgroup    id="g1" label="un" style="background-color:#FFFFAA">
        <option>a</option>
        <option>b</option>
    </optgroup>
    <optgroup     id="g2" label="deux" style="background-color:#AAFFFF">
        <option>c</option>
        <option>d</option>
        <option>e</option>
        <option>f       </option>
    </optgroup>
    <optgroup     id="g3" label="trois" style="background-color:#FFAAFF">
        <option>g</option>
        <option>h</option>
        <option>i</option>
    </optgroup>
</select>
enlever "deux"
enlever "un"
remettre

</HTML>

A voir.

[o-_-o]
Commenter la réponse de Zobibol
cs_bultez 13619 Messages postés jeudi 13 février 2003Date d'inscription 15 octobre 2013 Dernière intervention - 22 févr. 2007 à 12:41
0
Merci
ça a l'air de baigner, non ?
y'a encore quelque chose qui t'inquiètes ou tu
    nous places ça dans les Codes ?
    ( ça peut servir ! )
<hr />


Cordialement            Bul         [mon Site]     [M'écrire]  




<hr />
Commenter la réponse de cs_bultez
Zobibol 469 Messages postés mercredi 9 janvier 2002Date d'inscription 20 février 2017 Dernière intervention - 22 févr. 2007 à 12:50
0
Merci
En fait, y a encore une petite chose ( que j'ai oublié mais en même temps, je vais pas tout faire ;o))
il faut réinitialisé document.body.removeSel à null dans la méthode remettre, ça ne pose pas de problème, mais c'est plus propre...

Maintenant, savoir si ça réponds aux attentes, la est la question.

[o-_-o]
Commenter la réponse de Zobibol
cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention - 22 févr. 2007 à 13:11
0
Merci
Merci a vous deux !

Peut-on supprimer les un et les deux en même temps?
C'est le but de la liste multi choix!

Cdt,
Fabiano13
Commenter la réponse de cs_fabiano13
cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention - 22 févr. 2007 à 13:37
0
Merci
Aussi peut-on supprimer qu'une option et non tout le groupe d'option ?

D'avance merci.
Fabiano13
Commenter la réponse de cs_fabiano13
Zobibol 469 Messages postés mercredi 9 janvier 2002Date d'inscription 20 février 2017 Dernière intervention - 22 févr. 2007 à 13:39
0
Merci
Oui on peux, il faut adapter les traitements sur enlever qui devra accepter une liste d'id à caché
du coup ( après optimisation des traitements on aurait )
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">

        /**
        * Enlève
        *
        * @param quois
        *                array contenant les id à enlever.
        * @param ou
        *                dans quel select.
        */
        function enlever(quois, ou)
        {   
                // quel select ?
                var sel = document.getElementById(ou);
                // si toute fois il éxiste un option groupe de caché ( display none ) stocké dans la variable removeSel du body
                // alors on le remontre ( au cas ou )
                if ( sel.removeSel != null )
                    remettre (ou);
                // récupère tous les optgroup du sel
                var optGroups = sel.getElementsByTagName ("OPTGROUP");
                for ( var j =0; j < quois.length; j++){
                    var quoi = quois[j];
                        for ( var i =0; i < optGroups.length; i++){
                                if ( optGroups[i].id == quoi ){
                                     // si pas de contrôle sélectionné alors on créé un nouvel enregistrement.
                                     if ( sel.removeSel == null )
                                         sel.removeSel = new Array();
                                       // stock l'index sur le contrôle à supprimer.
                                   document.getElementById(quoi).indexPos = i;
                                   // le stock dans le body sous forme d'array
                                   sel.removeSel.push( document.getElementById(quoi) );
                                }
                        }
                }
                //et enfin, les supprimes
                for ( var i = 0; i < sel.removeSel.length; i++)
                    document.getElementById(ou).removeChild ( sel.removeSel[i]);
        }
       
        /**
        * Réaffiche le contrôle caché
        * @param ou
        *                id du sel auquel remettre le block caché
        */
        function remettre (ou){
            // le select en cours.
            var sel = document.getElementById(ou);
            // si il y a des infos caché...
            if ( sel.removeSel != null){
                // listes les contrôles supprimer
                var quois = sel.removeSel;
                // parcours les fils ( optGroup du select ).
                var optGroups = document.getElementById(ou).getElementsByTagName ("OPTGROUP");               
                for ( var j = 0; j < quois.length; j++){
                    // insère le contrôle
                    document.getElementById(ou).insertBefore( quois[j], optGroups[quois[j].indexPos]);
                }
                // supprime l'enregistrement.
                sel.removeSel = null;
            }
        }

</script>
</HEAD>

<select size=16
        id="sel">
    <optgroup    id="g1" label="un" style="background-color:#FFFFAA">
        <option>a</option>
        <option>b</option>
    </optgroup>
    <optgroup     id="g2" label="deux" style="background-color:#AAFFFF">
        <option>c</option>
        <option>d</option>
        <option>e</option>
        <option>f       </option>
    </optgroup>
    <optgroup     id="g3" label="trois" style="background-color:#FFAAFF">
        <option>g</option>
        <option>h</option>
        <option>i</option>
    </optgroup>
</select>

<select size=16
        id="sel0">
    <optgroup    id="g10" label="un" style="background-color:#FFFFAA">
        <option>a</option>
        <option>b</option>
    </optgroup>
    <optgroup     id="g20" label="deux" style="background-color:#AAFFFF">
        <option>c</option>
        <option>d</option>
        <option>e</option>
        <option>f       </option>
    </optgroup>
    <optgroup     id="g30" label="trois" style="background-color:#FFAAFF">
        <option>g</option>
        <option>h</option>
        <option>i</option>
    </optgroup>
</select>
enlever "deux"
enlever "un"
enlever "un et deux"
enlever "un et trois de sel0"
remettre
remettre sel 0

</HTML>

Du coup, maintenant il est possible d'avoir plusieur select  différent.
De plus j'ai un peu optimiser le code ( y a des jours ou je me demande bien à quoi je pense ).
Le petit inconvénient, c'est le passage des paramètres à la méthode enlever ( [..., ..., ...], "") voilà voilà

[o-_-o]
Commenter la réponse de Zobibol
cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention - 22 févr. 2007 à 14:36
0
Merci
Je ne trouve pas la solution qui peut supprimer qu'une option et non tout le groupe d'option ?

D'avance merci pour ton aide.
Fabiano13
Commenter la réponse de cs_fabiano13
Zobibol 469 Messages postés mercredi 9 janvier 2002Date d'inscription 20 février 2017 Dernière intervention - 22 févr. 2007 à 16:02
0
Merci
Alors la, je me dis bravo à moi même personnellement
après moults tests dans tous les sens possibles, je te propose cette solution
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
/**
* Cache les contrôle de type _type dans le contrôle _id
*
* @param _id
*                identifiant du select
*    @param _type
*                type de contrôle à cacher
*                    soit OPTGROUP
*                    soit OPTION
*    @param _ids
*                identifiants ( sous forme d'array à cacher )
*/               
function hide ( _id, _type,_ids){
    // verifie si _id à bien une valeur dans la liste de ces fils
    var ctrl = document.getElementById(_id);
    // si listChilds est null on le renseigne avec tous ses fils.
    if ( ctrl.listChilds == null){
            // création d'un nouvel enregistrement
            ctrl.listChilds = new Array();
            // récupère tous les optgroup
            var ctrlsChilds = ctrl.getElementsByTagName("OPTGROUP");
            // et les stocks dans le tableau.
            for ( var i = 0; i < ctrlsChilds.length; i++){
                    // stock l'id pour une sauvegarde et le détruit
                    var clone = ctrlsChilds[i].cloneNode(true);
                    clone._id = clone.id;
                    clone.id =null;
                    // fait de même avec tous les fils de celui ci
                    var childs = clone.getElementsByTagName ("OPTION");
                    for ( var j = 0;  j< childs.length; j++){
                            childs[j]._id = childs[j].id;
                            childs[j].id = null;
                    }
                    ctrl.listChilds.push (clone );
            }
    }
    // récupère la liste des composants de type _type
    var typeObj = ctrl.getElementsByTagName (_type);
    // parcours l'ensemble des ids passer en paramètre et les supprimes
    for ( var i =0 ; i < _ids.length; i++){
        // parcours l'ensemble des contrôles trouvés
        for ( var j = 0; j < typeObj.length; j++){
            // si les id sont identiques alors on le supprime
            if ( typeObj[j].id == _ids[i] ){
                    typeObj[j].parentNode.removeChild ( typeObj[j] );
            }
        }
    }
}

/**
* Tout afficher
*
* @param _id
*                identifiant du select ou il faut tout afficher
*/
function showAll (_id ){
    var ctrl = document.getElementById(_id);
    // réinitialise le composant.
    ctrl.innerHTML = "";
    // ajoute tous ces fils
   
    for ( var i = 0; i < ctrl.listChilds.length; i++){
             var ret = ctrl.appendChild ( ctrl.listChilds[i]) ;
            // réattribut l'id
            ret.id = ret._id;
            // fais de même pour ces fils
            for ( var j = 0; j < ret.childNodes.length; j++){
                ret.childNodes[j].id = ret.childNodes[j]._id;
            }
    }
    ctrl.listChilds = null;
}

</script>
</HEAD>

<select size=16
        id="sel">
    <optgroup    id="g1" label="un" style="background-color:#FFFFAA">
        <option id="a">a</option>
        <option id="b">b</option>
    </optgroup>
    <optgroup     id="g2" label="deux" style="background-color:#AAFFFF">
        <option>c</option>
        <option>d</option>
        <option>e</option>
        <option>f       </option>
    </optgroup>
    <optgroup     id="g3" label="trois" style="background-color:#FFAAFF">
        <option>g</option>
        <option>h</option>
        <option>i</option>
    </optgroup>
</select>

<select size=16
        id="sel0">
    <optgroup    id="g10" label="un" style="background-color:#FFFFAA">
        <option id="a1" >a</option>
        <option id="b1" >b</option>
    </optgroup>
    <optgroup     id="g20" label="deux" style="background-color:#AAFFFF">
        <option id="c1" >c</option>
        <option id="d1" >d</option>
        <option id="e1" >e</option>
        <option id="f1" >f       </option>
    </optgroup>
    <optgroup     id="g30" label="trois" style="background-color:#FFAAFF">
        <option id="g1" >g</option>
        <option id="h1" >h</option>
        <option id="i1" >i</option>
    </optgroup>
</select>
cacher le block 1 et 3 de sel0
cache les options a1, g1 et f1
cacher le block 2 de sel
montrer sel
montrer sel0

</HTML>

cette fois ci, j'ai décidé de refondre les méthodes correctements:
    la méthode hide accepte trois paramètre :
          - l'id du select auquel il faut cacher des contrôles
          - le type de contrôle à cacher ( "OPTGROUP" ou "OPTION" )
          - les ids ( sous forme d'array ) des contrôles à cacher.
   
    la méthode showAll accepte un paramètre l'id du contrôle qu'il faut remontrer.

voilà ceci te convient-il ?
si toute fois tu as besoin de précision, je suis à ta disposition

[o-_-o]
Commenter la réponse de Zobibol
cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention - 22 févr. 2007 à 16:09
0
Merci
Superbe, tu mets d'une très grande aide, maintenant il faut te présenter à mon exament !

Je reviens sur ton code car j'ai bien peur que la reconstruction ne marche pas !

Peux tu me dire pourquoi ?

Ton ami.
Fabiano13
Commenter la réponse de cs_fabiano13
Zobibol 469 Messages postés mercredi 9 janvier 2002Date d'inscription 20 février 2017 Dernière intervention - 22 févr. 2007 à 16:12
0
Merci
Qu'est ce qui ne marche pas dans la reconstruction ?
parce que la, comme ça, je peux pas t'aider...

c'est quoi comme examen ?

[o-_-o]
Commenter la réponse de Zobibol
cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention - 22 févr. 2007 à 16:21
0
Merci
C'est pour mon mémoire de fin d'année. Master II en informatique (Sciences de l'Information et des Systèmes).

Pour revenir au code, quand tu supprimes avec le bouton "cache les options a1, g1 et f1" ça marche très bien. Cependant quand tu veux réitialiser avec le bouton (montrer sel) ou avec l'autre ça ne marche pas !

Merci d'avance.
Fabiano13
Commenter la réponse de cs_fabiano13
Zobibol 469 Messages postés mercredi 9 janvier 2002Date d'inscription 20 février 2017 Dernière intervention - 22 févr. 2007 à 16:33
0
Merci
En effet, j'ai oublié un petit quelque chose du nom d'internet explorer.....
parce que ça fonctionne bien avec FF
du coup je suis en train de regarder quoi qui va pas j'y suis presque y a juste un petit soucis....
remplace la méthode showAll par celle-ci

/**
* Tout afficher
*
* @param _id
*                identifiant du select ou il faut tout afficher
*/
function showAll (_id ){
    var ctrl = document.getElementById(_id);
    // réinitialise le composant.
    ctrl.innerHTML = "";
    // ajoute tous ces fils
   
    for ( var i = 0; i < ctrl.listChilds.length; i++){
             var ret = ctrl.appendChild ( ctrl.listChilds[i]) ;
            // réattribut l'id
            ret.id = ret._id;
            // fais de même pour ces fils
            for ( var j = 0; j < ret.childNodes.length; j++){
                if ( ret.childNodes[j]._id != null )
                    ret.childNodes[j].id = ret.childNodes[j]._id;
            }
    }
    ctrl.listChilds = null;
}

il y a un petit soucis, le style appliqué à l'entête ( "un", "deux" et "trois")  ne s'applique pas au bloc lors de la reconstruction.

Je vais jeter un oeil mais je ne garanti rien

Bon couragepour ton master

[o-_-o]
Commenter la réponse de Zobibol
cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention - 22 févr. 2007 à 18:25
0
Merci
Merci ça marche très bien.

Une toute petite dernière question :

Peut-on reconstruire élément par élément, plutôt que de tout reconstruire d'un coup ?

D'avance merci.
Fabiano13
Commenter la réponse de cs_fabiano13
cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention - 23 févr. 2007 à 00:17
0
Merci
J'ai modifié légèrement ton code ! Je suis presqu'à la fin !!!

Peux tu faire un essai en selectionnant plusieurs valeurs de la colonne de gauche.

Je souhaiterai enlever toutes les valeurs qui ont le même label de la colonne de droite !

Mais je ne sais pas comment m'y prendre !

D'avance merci.
Fabiano13

===================================

<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
           
function hide(_id, _type,_ids){
    var ctrl = document.getElementById(_id);
    if ( ctrl.listChilds == null){
            ctrl.listChilds = new Array();
            var ctrlsChilds = ctrl.getElementsByTagName("OPTGROUP");
            for ( var i = 0; i < ctrlsChilds.length; i++){
                    var clone = ctrlsChilds[i].cloneNode(true);
                    clone._id = clone.id;
                    clone.id =null;
                    var childs = clone.getElementsByTagName ("OPTION");
                    for ( var j = 0;  j< childs.length; j++){
                            childs[j]._id = childs[j].id;
                            childs[j].id = null;
                    }
                    ctrl.listChilds.push (clone );
            }
    }
    var typeObj = ctrl.getElementsByTagName (_type);
    for ( var i =0 ; i < _ids.length; i++){
        for ( var j = 0; j < typeObj.length; j++){
            if ( typeObj[j].id == _ids[i] ){
                    typeObj[j].parentNode.removeChild ( typeObj[j] );
            }
        }
    }
}


function showAll (_id ){
    var ctrl = document.getElementById(_id);
    // réinitialise le composant.
    ctrl.innerHTML = "";
    // ajoute tous ces fils
   
    for ( var i = 0; i < ctrl.listChilds.length; i++){
             var ret = ctrl.appendChild ( ctrl.listChilds[i]) ;
            // réattribut l'id
            ret.id = ret._id;
            // fais de même pour ces fils
            for ( var j = 0; j < ret.childNodes.length; j++){
                if ( ret.childNodes[j]._id != null )
                    ret.childNodes[j].id = ret.childNodes[j]._id;
            }
    }
    ctrl.listChilds = null;
}


function Trier(){
var selectione="";
for (i=0; i<document.getElementById('sel').options.length; i++) {
  if (!document.getElementById('sel').options[i].selected ) {
      selectione += "'" + document.getElementById('sel').options[i].label + "',";
  }
}
var sSelection = selectione.substr(0,selectione.length - 1)
var ctrl = document.getElementById('sel0');
if ( ctrl.listChilds != null){
showAll('sel0')
}
hide('sel0','OPTION',eval("[" + sSelection + "]"))
}
</script>
</HEAD>

<select onchange="Trier();" size=16 id="sel" multiple>
    <optgroup id="g1" label="un" style="background-color:#FFFFAA">
        <option label="a1" id="a" style="background-color:#FFFFAA">a</option>
        <option label="b1" id="b" style="background-color:#FFFFAA">b</option>
    </optgroup>
    <optgroup   id="g2" label="deux" style="background-color:#AAFFFF">
        <option label="c1" id="a" style="background-color:#AAFFFF">c</option>
        <option label="d1" id="a" style="background-color:#AAFFFF">d</option>
        <option label="e1" id="a" style="background-color:#AAFFFF">e</option>
        <option label="f1" id="a" style="background-color:#AAFFFF">f       </option>
    </optgroup>
    <optgroup   id="g3" label="trois" style="background-color:#FFAAFF">
        <option label="g1" id="a" style="background-color:#FFAAFF">g</option>
        <option label="h1" id="a" style="background-color:#FFAAFF">h</option>
        <option label="i1" id="a" style="background-color:#FFAAFF">i</option>
    </optgroup>
</select>


<select size=16 id="sel0" multiple>
    <optgroup  id="g10" label="un" style="background-color:#FFFFAA">
        <option label="b1" id="a1" style="background-color:#FFFFAA">a</option>
        <option label="a1" id="b1" style="background-color:#FFFFAA">b</option>
    </optgroup>
    <optgroup   id="g20" label="deux" style="background-color:#AAFFFF">
        <option label="a1" id="c1" style="background-color:#AAFFFF">c</option>
        <option label="c1" id="d1" style="background-color:#AAFFFF">d</option>
        <option label="b1" id="e1" style="background-color:#AAFFFF">e</option>
        <option label="a1" id="f1" style="background-color:#AAFFFF">f       </option>
    </optgroup>
    <optgroup   id="g30" label="trois" style="background-color:#FFAAFF">
        <option label="a1" id="g1" style="background-color:#FFAAFF">g</option>
        <option label="d1" id="h1" style="background-color:#FFAAFF">h</option>
        <option label="a1" id="i1" style="background-color:#FFAAFF">i</option>
    </optgroup>
</select></HTML>


 
Commenter la réponse de cs_fabiano13
cs_fabiano13 262 Messages postés mardi 26 février 2002Date d'inscription 27 février 2012 Dernière intervention - 23 févr. 2007 à 00:56
0
Merci
Haïïïiiii

Je me suis trop précipité !!!

Peux tu faire le test dans cette ordre :

Selection dans la colonne de gauche :
A
B
C
D

Tu notera que lorsque tu fais une sélection simple le c (B) pose problème ! Surement par ça position !
En choix multiple ça ne pose aucun problème si ce n'est que lorsqu'il en reste qu'un le c (B) reste !

Peux tu y jeter un coup d'oeuil ?

D'avance merci.
Fabiano13

==============================================

<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
           
function hide(_id, _type,_ids){
    var ctrl = document.getElementById(_id);
    if ( ctrl.listChilds == null){
            ctrl.listChilds = new Array();
            var ctrlsChilds = ctrl.getElementsByTagName("OPTGROUP");
            for ( var i = 0; i < ctrlsChilds.length; i++){
                    var clone = ctrlsChilds[i].cloneNode(true);
                    clone._id = clone.id;
                    clone.id =null;
                    var childs = clone.getElementsByTagName ("OPTION");
                    for ( var j = 0;  j< childs.length; j++){
                            childs[j]._id = childs[j].id;
                            childs[j].id = null;
                    }
                    ctrl.listChilds.push (clone );
            }
    }
    var typeObj = ctrl.getElementsByTagName (_type);
    for ( var i =0 ; i < _ids.length; i++){
        for ( var j = 0; j < typeObj.length; j++){
            if ( typeObj[j].label == _ids[i] ){
                    typeObj[j].parentNode.removeChild ( typeObj[j] );
            }
        }
    }
}


function showAll (_id){
    var ctrl = document.getElementById(_id);
    // réinitialise le composant.
    ctrl.innerHTML = "";
    // ajoute tous ces fils
   
    for ( var i = 0; i < ctrl.listChilds.length; i++){
             var ret = ctrl.appendChild ( ctrl.listChilds[i]) ;
            // réattribut l'id
            ret.id = ret._id;
            // fais de même pour ces fils
            for ( var j = 0; j < ret.childNodes.length; j++){
                if ( ret.childNodes[j]._id != null )
                    ret.childNodes[j].id = ret.childNodes[j]._id;
            }
    }
    ctrl.listChilds = null;
}


function Trier(){
var selectione="";
for (i=0; i<document.getElementById('sel').options.length; i++) {
  if (!document.getElementById('sel').options[i].selected ) {
      selectione += "'" + document.getElementById('sel').options[i].label + "',";
  }
}
var sSelection = selectione.substr(0,selectione.length - 1)
var ctrl = document.getElementById('sel0');
if ( ctrl.listChilds != null){
showAll('sel0')
}
hide('sel0','OPTION',eval("[" + sSelection + "]"))
}
</script>
</HEAD>

<select onchange="Trier();" size=16 id="sel" multiple>
    <optgroup id="g1" label="un" style="background-color:#FFFFAA">
        <option label="a1" style="background-color:#FFFFAA">a</option>
        <option label="b1" style="background-color:#FFFFAA">b</option>
    </optgroup>
    <optgroup   id="g2" label="deux" style="background-color:#AAFFFF">
        <option label="c1" style="background-color:#AAFFFF">c</option>
        <option label="d1" style="background-color:#AAFFFF">d</option>
        <option label="e1" style="background-color:#AAFFFF">e</option>
        <option label="f1" style="background-color:#AAFFFF">f</option>
    </optgroup>
    <optgroup   id="g3" label="trois" style="background-color:#FFAAFF">
        <option label="g1" style="background-color:#FFAAFF">g</option>
        <option label="h1" style="background-color:#FFAAFF">h</option>
        <option label="i1" style="background-color:#FFAAFF">i</option>
    </optgroup>
</select>


<select size=16 id="sel0" multiple>
    <optgroup  id="g10" label="un" style="background-color:#FFFFAA">
        <option label="b1" id="a1" style="background-color:#FFFFAA">a (B)</option>
        <option label="a1" id="b1" style="background-color:#FFFFAA">b (A)</option>
    </optgroup>
    <optgroup   id="g20" label="deux" style="background-color:#AAFFFF">
        <option label="b1" id="c1" style="background-color:#AAFFFF">c (B)</option>
        <option label="a1" id="d1" style="background-color:#AAFFFF">d (A)</option>
        <option label="b1" id="e1" style="background-color:#AAFFFF">e (B)</option>
        <option label="c1" id="f1" style="background-color:#AAFFFF">f (C)</option>
    </optgroup>
    <optgroup   id="g30" label="trois" style="background-color:#FFAAFF">
        <option label="a1" id="g1" style="background-color:#FFAAFF">g (A)</option>
        <option label="d1" id="h1" style="background-color:#FFAAFF">h (D)</option>
        <option label="a1" id="i1" style="background-color:#FFAAFF">i (A)</option>
    </optgroup>
</select></HTML>
Commenter la réponse de cs_fabiano13

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.