Afficher un element selectionner

krika

2 Aug 2013 à 20:27

bonjour à tous et a toutes, je suis nouveau suis le forum et svp je voudrais beaucoup que vous m'aidiez.
En effet ma préoccupation actuelle est de faire afficher sur mon site après avec fait une sélection d’éléments.
je m'explique
<select>
<option>Menu</option>
<option>Accueil</option>
<option>Contact</option>
</select>
je voudrais après selection de Menu le faire afficher..

iforce5

5 Aug 2013 à 12:42

Bonjour krika, Voici un code qui pourra t'aider


<!DOCTYPE HTML>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Alsa</title>
		
		<style>
			.masquer{
				display:none;
			}
			
			.afficher{
				display:block;
			}
			
			
		</style>
	</head>
	<body>
		<select id="select">
			<option value="M">Menu</option>
			<option value="A">Accueil</option>
			<option value="C">Contact</option>
		</select>
		
		<div id="menu" class="masquer">
			Menu
		</div>
		
		<div id="accueil" class="masquer">
			Accueil
		</div>
		
		<div id="contact" class="masquer">
			Contact
		</div>
		
		<!-- include jQuery library --> 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
		<script>			
			$("#select").change(function () {
				select = document.getElementById("select");
				choice = select.selectedIndex;
				valeur = select.options[choice].value;
				
				
				$(".afficher").removeClass("afficher").addClass("masquer"); 
				
				if(valeur == "M"){
					$("#menu").removeClass("masquer").addClass("afficher");
				}else if(valeur == "A"){
					$("#accueil").removeClass("masquer").addClass("afficher");
				}else if(valeur == "C"){
					$("#contact").removeClass("masquer").addClass("afficher");
				}
				
			});
		</script>
		
	<body>
</html>