Afficher et masquer un bloc div en fonction d’une liste déroulante – JQuery

L’exemple suivant montre comment afficher et masquer des blocs div en fonction d’une liste déroulante e utilisant la méthode change() de jQuery en combinaison avec les méthodes show() et hide(). Les blocs div de l’exemple suivant sont masquées par défaut à l’aide de la propriété « display » de CSS, dont la valeur est définie sur « none ».
 
 

Code source :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Afficher/masquer un bloc div en fonction d'une liste déroulante</title>
		<style type="text/css">
			.msg{
				margin-top: 25px;
				padding: 25px;
				display: none;
				color: #fff;
			}
			.yellow{ 
				background: yellow; 
			}
			.green{ 
				background: green; 
			}
			.red{ 
				background: red; 
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("select").change(function(){
            $(this).find("option:selected").each(function(){
                var val = $(this).attr("value");
                if(val){
                    $(".msg").not("." + val).hide();
                    $("." + val).show();
                } else{
                    $(".msg").hide();
                }
            });
        }).change();
    });
    </script>
	</head>
	<body>
    <select>
        <option>Choisissez la couleur</option>
        <option value="yellow">Jaune</option>
        <option value="red">Rouge</option>
        <option value="green">Vert</option>
    </select>
		<div class="yellow msg">Vous avez sélectionné le jaune</div>
		<div class="red msg">Vous avez sélectionné le rouge</div>
		<div class="green msg">Vous avez sélectionné le vert</div>
	</body>
</html>
Résultat
Vous avez sélectionné le jaune
Vous avez sélectionné le rouge
Vous avez sélectionné le vert
QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *