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>

<title>Afficher/masquer un bloc div en fonction d'une liste déroulante</title>

.msg{

margin-top: 25px;

padding: 25px;

display: none;

color: #fff;

}

.yellow{

background: yellow;

}

.green{

background: green;

}

.red{

background: red;

}

</style>

$(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>

<option>Choisissez la couleur</option>

<option value="yellow">Jaune</option>

<option value="red">Rouge</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>

<!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>

<!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>