[RESOLU] Afficher / Masquer des DIV

[Bounty59]

Bonjour,

Je rencontre un petit souci.
J'ai une liste déroulante contenant 5 éléments.
Je souhaiterais que lorsqu'un élément est sélectionné, des cases à cocher correspondantes s'affichent, en dessous de la liste déroulante. Puis que ces cases soient remplacées par d'autres en cas de changement de sélection dans la liste déroulante.

Voici mon code :

- Dans HEAD :

[cpp]

<script language='javascript'>

function changerub(rubrique){
if(rubrique==0){
document.write("<table width = '50%'><tr><input type='checkbox' name='expedparcode' />Expéditions par code CPS</tr>
<tr><input type='checkbox' name='listeavis' />Liste des avis</tr><table>");
}
elseif(rubrique==1){
document.write("<table width = '50%'><tr><input type='checkbox' name='horseuropipe' />Hors Europipe</tr>
<tr><input type='checkbox' name='europipe' />Europipe</tr>
<tr><input type='checkbox' name='iran' />Iran</tr>
<tr><input type='checkbox' name='plaquettes' />Plaquettes</tr></table>");
}
elseif(rubrique==2){
document.write("<table width = '50%'><tr><input type='checkbox' name='parpostecommande' />Par poste de commande</tr>
<tr><input type='checkbox' name='parcommande' />Par commande</tr></table>");
}
elseif(rubrique==3){
document.write("<table width = '50%'><tr><input type='checkbox' name='transtschoix' />Tous choix</tr></table>");
}
elseif(rubrique==4){
document.write("<table width = '50%'><tr><input type='checkbox' name='fournitures' />Fournitures gratuites interservises LAF</tr>
<tr><input type='checkbox' name='suiviagp' />Suivi AGP</tr>
<tr><input type='checkbox' name='ziegel' />Ziegelander</tr>
<tr><input type='checkbox' name='dicut' />Dicut</tr></table>");
}
}

</script>

[/cpp]


- Dans BODY :

[cpp]

<form name="formrub" action="" method="post">
<b>Sélectionnez une rubrique :</b><br />
<SELECT name="rubrique" size="1" onChange="changerub(formrub.rubrique.selectedIndex)">
<OPTION selected>Tous choix
<OPTION>Tubes
<OPTION>Déclassés
<OPTION>Transport
<OPTION>Divers
</SELECT></form>

[/cpp]

>> La liste déroulante s'affiche correctement mais rien ne se produit lorsque je change la sélection.

Je vous remercie par avance pour votre aide,
Alex

 

[KangOl]

oui mais non

faut pas faire des write mais affichier / cacher des div ...

 

[Bounty59]

Bonjour,

... Et merci pour votre réponse.
J'ai donc modifié mon code, et regroupé chaque "lot" de cases à cocher dans des DIV distinctes, comme ça.

[cpp]

<div id="casesTouschoix" style="display:none">
<table width="50%"><tr><input type='checkbox' name='expedparcode' />Expéditions par code CPS</tr>
<tr><input type='checkbox' name='listeavis' />Liste des avis</tr></table>
</div>

<div id="casesTubes" style="display:none">
<table width="50%"><tr><input type='checkbox' name='horseuropipe' />Hors Europipe</tr>
<tr><input type='checkbox' name='europipe' />Europipe</tr>
<tr><input type='checkbox' name='iran' />Iran</tr>
<tr><input type='checkbox' name='plaquettes' />Plaquettes</tr></table>
</div>

<div id="casesDeclasses" style="display:none">
<table width="50%"><tr><input type='checkbox' name='parpostecommande' />Par poste de commande</tr>
<tr><input type='checkbox' name='parcommande' />Par commande</tr></table>
</div>

<div id="casesTransport" style="display:none">
<table width="50%"><tr><input type='checkbox' name='transtschoix' />Tous choix</tr></table>
</div>

<div id="casesDivers" style="display:none">
<table width="50%"><tr><input type='checkbox' name='fournitures' />Fournitures gratuites interservises LAF</tr>
<tr><input type='checkbox' name='suiviagp' />Suivi AGP</tr>
<tr><input type='checkbox' name='ziegel' />Ziegelander</tr>
<tr><input type='checkbox' name='dicut' />Dicut</tr></table>
</div>

[/cpp]

Par défaut, j'ai mis la propriété display de chaque div à "none", car aucune case ne doit être affichée au départ.

Par contre, comment changer la valeur de cette propriété en javascript, pour afficher ou non les groupes de cases à cocher en fonction de l'élément sélectionné dans la liste déroulante ?...

J'ai essayé ça, mais ça ne semble pas fonctionner :

- HTML :

[cpp]

<form name="formsuivi" action="compta.php" method="post">

<b>Sélectionnez une rubrique :</b>

<SELECT name="rubrique" size="1" onChange="changerub(formsuivi.rubrique.selectedIndex)">
<OPTION value="listetouschoix" selected>Tous choix
<OPTION value="listetubes" >Tubes
<OPTION value="listedeclasses" >Déclassés
<OPTION value="listetransport" >Transport
<OPTION value="listedivers" >Divers
</SELECT>

[...]

</form>

[/cpp]


- JAVASCRIPT :

[cpp]

function changerub(rubrique){
if(rubrique==0){
var targetElement;
targetElement = document.formsuivi.getElementById('touschoix');
targetElement.style.display = "" ;
}
elseif(rubrique==1){
var targetElement;
targetElement = document.formsuivi.getElementById('tubes');
targetElement.style.display = "" ;
}
elseif(rubrique==2){
var targetElement;
targetElement = document.formsuivi.getElementById('declasses');
targetElement.style.display = "" ;
}
elseif(rubrique==3){
var targetElement;
targetElement = document.formsuivi.getElementById('transport');
targetElement.style.display = "" ;
}
elseif(rubrique==4){
var targetElement;
targetElement = document.formsuivi.getElementById('divers');
targetElement.style.display = "" ;
}
}

[/cpp]

Merci par avance,
Alex

 

[Bounty59]

UP SVP

 

[KangOl]

faut mettre display à "block" et pas à ""

 

[Bounty59]

Merci, j'ai fait la modif. Mais toujours rien... A part une erreur Javascript. :sarcastic:

>> "Objet attendu"

[cpp]

function changerub(rubrique){

var targetElement;

if(rubrique==0){
targetElement = document.formsuivi.getElementById('touschoix');
targetElement.style.display = "block" ;
}
elseif(rubrique==1){
targetElement = document.formsuivi.getElementById('tubes');
targetElement.style.display = "block" ;
}
elseif(rubrique==2){
targetElement = document.formsuivi.getElementById('declasses');
targetElement.style.display = "block" ;
}
elseif(rubrique==3){
targetElement = document.formsuivi.getElementById('transport');
targetElement.style.display = "block" ;
}
elseif(rubrique==4){
targetElement = document.formsuivi.getElementById('divers');
targetElement.style.display = "block" ;
}
}

[/cpp]


[cpp]

<form name="formsuivi" action="compta.php" method="post">

<b>Sélectionnez une rubrique :</b>

<SELECT name="rubriques" size="1" onChange="changerub(formsuivi.rubriques.selectedIndex);">
<OPTION value="listetouschoix" selected>Tous choix
<OPTION value="listetubes" >Tubes
<OPTION value="listedeclasses" >Déclassés
<OPTION value="listetransport" >Transport
<OPTION value="listedivers" >Divers
</SELECT>

[...]
</form>

[/cpp]

Merci beaucoup à qui pourra m'aider !

 

[Bounty59]

Problème résolu.

 

[zeb]

Et quelle est ta soluce, s'il te plait ?

 

[Bounty59]

Vous la trouverez sur le forum d'Hardware. J'ai reçu une réponse complète 7 minutes après avoir posté mon message... J'aurai dû m'y rendre plus tôt.

Vous devez être connecté pour voir les liens.

Bon après-midi,