Liste Déroulante - Javascript
crush
-
crush -
crush -
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
<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>
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
<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>
A voir également:
- Liste Déroulante - Javascript
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Liste déroulante google sheet - Accueil - Guide bureautique
- Liste code ascii - Guide
- Site dangereux liste - Guide
2 réponses
Voilà une solution:
Par contre tel que tu as fait les paragraphes invisibles occupent leur place ce qui veut dire que si tu choisit le deuxième il est plus bas, si tu veux éviter ça remplaces dans le JS et le HTML
style.visibilty="hidden" par style.display='none'
et
style.visibilty="visible" par style.display='block'
ils s'afficheront toujours tous au même endroit dans la page
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript">
function affichage() //écriture de la fonction
{
//on va d'abord cacher tous les paragraphes
var nb_options = document.getElementById('select').options.length; //nbr
//on les parcours tous pour les cacher
for(i=1;i<nb_options;i++){
var id=document.getElementById('select').options[i].value;
document.getElementById(id).style.visibility='hidden';
}
//puis on rend visible celui selectionné
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>
Par contre tel que tu as fait les paragraphes invisibles occupent leur place ce qui veut dire que si tu choisit le deuxième il est plus bas, si tu veux éviter ça remplaces dans le JS et le HTML
style.visibilty="hidden" par style.display='none'
et
style.visibilty="visible" par style.display='block'
ils s'afficheront toujours tous au même endroit dans la page