2 listes liées (choix multiples)

Résolu

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012 - 22 févr. 2007 à 10:50
cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012 - 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>

A voir également:

2 listes liées (choix multiples)
Application de loto turbo 2 - Forum Visual Basic 6
Turbo assembleur 5.0 - Forum ASM
Choix aleatoire - Forum Flash
C# tableau 2 dimensions ✓ - Forum C# / .NET
Droitereg excel degré 2 ✓ - Forum VBA Office (Excel, Word ...)

19 réponses

Réponse 1 / 19

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
23 févr. 2007 à 00:27

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>

Réponse 2 / 19

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
22 févr. 2007 à 11:15

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

Réponse 3 / 19

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
22 févr. 2007 à 11:21

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;
    }
}
}

Réponse 4 / 19

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
22 févr. 2007 à 11:38

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

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

Posez votre question

Réponse 5 / 19

Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
22 févr. 2007 à 12:31

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]

Réponse 6 / 19

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
22 févr. 2007 à 12:41

ç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 />

Réponse 7 / 19

Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
22 févr. 2007 à 12:50

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]

Réponse 8 / 19

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
22 févr. 2007 à 13:11

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

Réponse 9 / 19

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
22 févr. 2007 à 13:37

Aussi peut-on supprimer qu'une option et non tout le groupe d'option ?

D'avance merci.
Fabiano13

Réponse 10 / 19

Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
22 févr. 2007 à 13:39

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]

Réponse 11 / 19

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
22 févr. 2007 à 14:36

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

Réponse 12 / 19

Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
22 févr. 2007 à 16:02

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]

Réponse 13 / 19

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
22 févr. 2007 à 16:09

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

Réponse 14 / 19

Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
22 févr. 2007 à 16:12

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]

Réponse 15 / 19

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
22 févr. 2007 à 16:21

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

Réponse 16 / 19

Zobibol Messages postés 469 Date d'inscription mercredi 9 janvier 2002 Statut Membre Dernière intervention 20 février 2017 6
22 févr. 2007 à 16:33

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]

Réponse 17 / 19

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
22 févr. 2007 à 18:25

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

Réponse 18 / 19

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
23 févr. 2007 à 00:17

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>

Réponse 19 / 19

cs_fabiano13 Messages postés 262 Date d'inscription mardi 26 février 2002 Statut Membre Dernière intervention 27 février 2012
23 févr. 2007 à 00:56

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>

Discussions similaires

Turbo C++

tirage aléatoire

Etablir toutes les combinaisons possibles du Lotto

controle Checkbox a choix unique

TURBO C++ et blocks que choisir

Votre réponse

Discussions similaires