Liste Déroulante - faire apparaître et disparaître des éléments

Version imprimable

Bonjour,

je débute en javascript en faisant des petits exercices. J'ai créer un menu déroulant et lorsqu'on choisi un élément du menu un paragraphe apparaît.

Ca fonctionne mais j'aimerais savoir comment faire pour faire disparaître le paragraphe qui est afficher lorsque je choisi un autre élément du menu. Présentement tout s'affiche à la suite de l'autre

merci

voici le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 
<SCRIPT language="JavaScript">
 
 
function affichage() //écriture de la fonction
{ 
var selectValue = document.getElementById('select').options[document.getElementById('select').selectedIndex].value;
 document.getElementById(selectValue).style.visibility='visible';
 
} 
</script>
</head>
 
<body>
 <select id="select" onchange="affichage();">
 <option >Choisir...</option>
    <option value="contrat">Contrat</option>
    <option value="employe">Employe</option>
    <option value="materiel">Materiel</option>
    <option value="prestataire">Prestataire</option>
    <option value="verification">Verifiaction</option>
  </select>
 
  <p id="contrat" style="visibility:hidden">Contrat</p>
    <p id="employe" style="visibility:hidden">Employe</p>
      <p id="materiel" style="visibility:hidden">Materiel</p>
        <p id="prestataire" style="visibility:hidden">prestataire</p>
          <p id="verification" style="visibility:hidden">verification</p>
 
 
</body>

Bonsoir,

Tout d'abord, nous n'utilisons plus cette syntaxe-ci :

Code:

<SCRIPT language="JavaScript">

Mais bien celle-là :

Code:

<script type="text/javascript">

Ensuite, s'offrent à vous plusieurs possibilités. L'une d'entre elle, peut-être pas la plus adéquate, est de refaire disparaitre tous les paragraphes avant d'afficher celui que vous désirez :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function affichage() //écriture de la fonction { //Récupération des balises <p> var tab_p = document.getElementsByTagName("P"); //Parcours de tous les <p> for(var i=0; i<tab_p.length; i++) { //Les cacher un par un tab_p[i].style.visibility = 'hidden'; } //Afficher celui sélectionné var selectValue = document.getElementById('select').options[document.getElementById('select').selectedIndex].value; document.getElementById(selectValue).style.visibility='visible'; }

04/10/2011, 22h04
crush911

merci
05/10/2011, 08h11
vermine

Ca fonctionne ? Votre problème est résolu ? :)

N'hésitez pas à utiliser le bouton :resolu: qui se trouve en bas de cette discussion. ;)