A voir également:
- Liste Déroulante - Javascript
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Telecharger javascript - Télécharger - Langages
- Supprimer liste déroulante excel - Forum Word
- Google sheet liste déroulante - Guide
2 réponses
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
4 oct. 2011 à 21:57
4 oct. 2011 à 21:57
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
