[RESOLU] Afficher / Masquer des DIV

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [RESOLU] Afficher / Masquer des DIV

Bounty59

Bonjour,

Je rencontre un petit souci, certainement de syntaxe.
J'ai une liste déroulante contenant 5 éléments.

Je souhaiterais que lorsqu'un élément est sélectionné dans cette liste, des cases à cocher correspondantes s'affichent. Puis que ces cases soient remplacées par d'autres en cas de changement de sélection dans la liste déroulante.

J'ai donc divisé chaque "lot" de cases à cocher dans des DIV distinctes, que je tente d'afficher lors de l'événement OnChange de la liste déroulante, en fonction de ce que l'utilisateur a sélectionné.
Mais ça ne fonctionne pas, j'obtiens une erreur JS "Objet attendu", et rien ne s'affiche lorsqu'un élément est sélectionné dans la liste déroulante.

Voici mon code :

- Dans HEAD (JavaScript) :

Code :

<script language="javascript">
// Fonction permettant l'affichage des cases à cocher en fonction de l'élément sélectionné dans la liste déroulante
// Chaque "lot" de cases à cocher est regroupé dans un div, identifié par un id
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" ;
}
}
</script>

- Dans BODY (HTML) :

Code :

<form name="formsuivi" action="compta.php" method="post">
<!-- Liste déroulante, appel de la fonction JS lors du changement du choix de la liste déroulante
avec comme paramètre le numéro de l'élément sélectionné (commence à 0) -->
<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>
<br />
<!-- Lot de cases à cocher pour la première catégorie
Paramètre display permet l'affiche ou non du bloc div
block >> Affiché
none >> Masqué -->
<div id="touschoix" style="display:block">
<input type='checkbox' name='expedparcode' />Expéditions par code CPS<br />
<input type='checkbox' name='listeavis' />Liste des avis
</div>
<div id="tubes" style="display:block">
<input type='checkbox' name='horseuropipe' />Hors Europipe<br />
<input type='checkbox' name='europipe' />Europipe<br />
<input type='checkbox' name='iran' />Iran<br />
<input type='checkbox' name='plaquettes' />Plaquettes
</div>
<div id="declasses" style="display:block">
<input type='checkbox' name='parpostecommande' />Par poste de commande<br />
<input type='checkbox' name='parcommande' />Par commande
</div>
<div id="transport" style="display:block">
<input type='checkbox' name='transtschoix' />Tous choix
</div>
<div id="divers" style="display:block">
<input type='checkbox' name='fournitures' />Fournitures gratuites interservises LAF<br />
<input type='checkbox' name='suiviagp' />Suivi AGP<br />
<input type='checkbox' name='ziegel' />Ziegelander<br />
<input type='checkbox' name='dicut' />Dicut
</div>

Je vous remercie par avance,
Alex

Message édité par Bounty59 le 17-01-2007 à 10:31:10

Publicité

anapajari

s/travail/glanding on hfr/gs;

Passe this.selectedIndex dans le onchange ça sera plus simple!

Et tu pourrais améliorer un peu ta fonction:

Code :

function changerub(rubrique){
var divIds= new Array('touschoix', 'tubes', 'declasses', 'transport', 'divers');
for(var i=0; i<divIds.length;i++){
document.getElementById(divIds[i]).style.display = (i==rubrique)?'block':'hiden';
}
}

note:code écrit sans vérification et de bon matin donc s'pas garanti hein

Bounty59

Merci beaucoup pour ta réponse.
J'ai rectifié le paramètre du OnChange, et remplacé ma fonction par la tienne, mais ça ne fonctionne toujours pas.
Même erreur Javascript : "Objet non-trouvé", qui n'apparait plus dès que je mets l'appel de la fonction en commentaire (donc le souci vient bien de là).

Au fait, que signifie :

Code :

document.getElementById(divIds[i]).style.display = (i==rubrique)?'block':'none';

Ca inverse la valeur de la propriété display ?

anapajari

s/travail/glanding on hfr/gs;

chez moi ça marche ^^ [:dawa] ( le code exact utilisé plus bas)

La ligne sur laquelle tu t'interroges alors:

Code :

i==rubrique)?'block':'none'

c'est la forme courte de

Code :

if ( i == rubrique){
/* ... */
}else{
/* .... */
}

donc en gros ça veut dire que la propriété display est mise à block si i égale rubrique et à none sinon ( belle correction de ma boulette au passage).

code utilisé pour tester ton truc:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<script type="text/javascript">
function changerub(rubrique){
var divIds= new Array('touschoix', 'tubes', 'declasses', 'transport', 'divers');
for(var i=0; i<divIds.length;i++){
document.getElementById(divIds[i]).style.display = (i==rubrique)?'block':'none';
}
}
</script>
</head>
<body>
<form name="formsuivi" action="compta.php" method="post">
<SELECT name="rubriques" size="1" onChange="changerub(formsuivi.rubriques.selectedIndex);">
<OPTION value="listetouschoix" selected>Tous choix
<OPTION value="listetubes" >Tubes
<OPTION value="listetransport" >Transport
<OPTION value="listedivers" >Divers
</SELECT>
<br />
ParamÃ¨tre display permet l'affiche ou non du bloc div
<div id="touschoix" style="display:none">
<input type='checkbox' name='listeavis' />Liste des avis
</div>
<div id="tubes" style="display:none">
<input type='checkbox' name='horseuropipe' />Hors Europipe<br />
<input type='checkbox' name='europipe' />Europipe<br />
<input type='checkbox' name='iran' />Iran<br />
<input type='checkbox' name='plaquettes' />Plaquettes
</div>
<div id="declasses" style="display:none">
<input type='checkbox' name='parpostecommande' />Par poste de commande<br />
<input type='checkbox' name='parcommande' />Par commande
</div>
<div id="transport" style="display:none">
<input type='checkbox' name='transtschoix' />Tous choix
</div>
<div id="divers" style="display:none">
<input type='checkbox' name='fournitures' />Fournitures gratuites interservises LAF<br />
<input type='checkbox' name='suiviagp' />Suivi AGP<br />
<input type='checkbox' name='ziegel' />Ziegelander<br />
<input type='checkbox' name='dicut' />Dicut
</div>
</form>
</body>
</html>

Bounty59

Merci mille fois pour ton aide précieuse, ça fonctionne !!

:jap:

mandrax

j'essai en ce moment de faire la même chose que celà mais sans formulaire. Avec de simple boutons comme éléments d'action.

Comment dois je m'y prendre ? j'ai essayer de trafficoter ce code mais je n'ai pas réussi à le faire fonctionner à ma sauce.

En fait j'ai 5 liens chacun affiche un div en particulier, tout en masquant les autres, comme avec l'exemple ci dessus.

FORUM HardWare.fr

Programmation

HTML/CSS

[RESOLU] Afficher / Masquer des DIV

Sujets relatifs
Afficher titre avec un lien	Fenetre qui apparait au survol d'un lien (résolu)
Taille de buffer? [Résolu]	pb de conception hibernate ... [RESOLu]
Problème de DIV lors de la réduction	Tableau impossible à afficher dans le haut absolu de la page
Afficher du XML sur une page HTML...	[Résolu]if qui ne fonctionne pas
Comment supprimer ligne vide en vbs?	Afficher le contenu d'un .txt dans un TMemo
Plus de sujets relatifs à : [RESOLU] Afficher / Masquer des DIV

Page générée en 0.115 secondes