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

juin 30, 2019février 10, 2020 Amine KOUIS Aucun commentaire select

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>