Apparaître ou disparaître dynamiquement les valeurs d'une "optgroup"

Signaler
Messages postés
262
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
27 février 2012
-
Messages postés
262
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
27 février 2012
-
Bonjour,

Comment faire disparaître ou faire ré-apparaître dynamiquement les valeurs de "optgroup" d'une liste ?

D'avance merci.
Fabiano13

5 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
B
onjour...

les attributs connus pour les OPGROUPs sont disabled et label, c'est peu,
mais tu peux toujours essayer de jouer avec le sytle="dislplay:none" ou style="display:block" mais sans aucune assurance quand à la compatibilté des différents navigateurs...

Peut être faudra t-il reconstruire tes SELECTs dynamiquement...

;0)
Messages postés
262
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
27 février 2012

sytle="dislplay:none" ne marche pas ou je ne sais pas où l'utiliser !

Par contre cette fonction marche pour faire disparaître mais le faire ré-apparaître je ne sais pas comment m'y prendre !

Peux tu m'aider ?

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




<optgroup label="Membre du bureau">
<option  id="14" value="145">Fabien Rimbot</option>
<option 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>

[# lien]

<script>
function OptGroup(id_du_optgroup)
{
  var ie = false;
  var q=document.getElementById(id_du_optgroup);
    if (q) 
 {
  if ( ie ) {
     q.outerHTML=null;
     }
  else  {
     q.innerHTML=null;
     q.label=null;
     }
  }
}
</script>
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Dans ce que tu cites ci dessus on ne fait pas disparaître le OPGROUP mais on supprime les Options suivant leur ID.

on peut procéder ainsi



<script type="text/javascript">
function OptGroup(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>


cela efface le champ de l'option et le restaure
;0)
Messages postés
262
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
27 février 2012

Ca efface mais le contraire ne marche pas !

Est ce que ça marche avec ie ?

Cdt,
Fabiano13
Messages postés
262
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
27 février 2012

Ok, j'avais fait une erreur, ça marche.
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 !

Peux tu y jetter un oeuil ?

D'avance merci.
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>



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



}




</script>