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

**crush911** · 03/10/2011, 19h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**vermine** · 03/10/2011, 22h11

Bonsoir,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<SCRIPT language="JavaScript">

Mais bien celle-là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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