Jquery: Sélectionnez le menu pour afficher et masquer certains éléments div

Question

Je cherche à créer un menu de sélection qui affiche et masque certaines divs en fonction de l'option sélectionnée; quelque chose comme ceci:

<select name="choose_colors" id="color_selector"> 
    <option value="select_color">Select color</option> 
    <option value="red">Choose Red</option> 
    <option value="blue">Choose Blue</option> 
    <option value="green">Choose Green</option> 
</select> 

<div id="red_options" class="color_options"> 
    ... 
</div> 

<div id="blue_options" class="color_options"> 
    ... 
</div> 

<div id="green_options" class="color_options"> 
    ... 
</div> 

Donc, si l'utilisation sélectionne « Choisissez rouge », le div pour #red_options montrera, et les #blue_options et #green_options cacheront.

Si l'utilisateur revient à l'option par défaut "Sélectionner la couleur", les divs # red_options/# blue_options/# vert sont masqués.

Comment ferais-je cela dans Jquery? Je pensais que ce serait quelque chose comme ceci:

<script> 
    $(".color_options").hide(); 

    $('select[name="choose_colors"]').change(function() { 
    if ("Select color") { 
     $("#red_options").hide(); 
     $("#blue_options").hide(); 
     $("#green_options").hide(); 
    } 
    if ("Red") { 
     $("#red_options").show(); 
    } 
    if ("Blue") { 
     $("#blue_options").show(); 
    } 
    if ("Green") { 
     $("#green_options").show(); 
    } 
    }); 
</script> 

Bien sûr, cela ne fonctionne pas correctement. Des idées?

Answer 1

Essayez ceci:

$("#color_selector").change(function() { 
    $(".color_options").hide(); 
    $("#" + $(this).val() + "_options").show(); 
} 

Cela tire parti des matches dans le menu déroulant des valeurs et la façon dont vous avez nommé vos divs, par exemple red = red_options

Answer 2

$("#color_selector").change(function() { 
    var color = $(this).val(); 
    $("div.color_options").hide().filter("#" + color + "_options").show(); 
}); 

Answer 3

Je pense que dans ce cas, vous ne devriez pas afficher/masquer différents divs, mais appliquer différentes classes pour un div au lieu.

Answer 4

$('#color_selector').change(function() 
{ 
    $(".color_options").hide(); 
    var color = $(this).val(); 
    $('#'+color+'_options').show(); 
    }); 

Answer 5

$(".color_options").hide(); 
$('#color_selector').change(function(){ 
    var color = $("#color_selector").val(); 
    $(".color_options").hide(); 
    $("#" + color + "_options").show(); 
});