jquery：选择菜单来显示和隐藏某些div元素

我正在创建一个选择菜单，显示和隐藏某些div基于选定的选项;是这样的：jquery：选择菜单来显示和隐藏某些div元素

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

因此，如果选择使用“选择红”，则#red_options股利将显示，和#blue_options和#green_options会隐藏。

如果用户返回到默认选项“选择颜色”，将＃red_options /＃blue_options /＃绿色的div是隐藏的。

我该如何做到这一点在JQuery中？我认为它会是这样的：

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

当然，这不能正常工作。有任何想法吗？

来源

2010-02-14 sjsc

试试这个：

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

这利用了比赛的下拉值，你已经如何命名你的div，如red = red_options

来源

2010-02-14 13:53:00

这是最好的方法imo。 – JoseMarmolejos

非常感谢你尼克！它效果很好。谢谢。 – sjsc

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

来源

2010-02-14 13:53:03 cletus

谢谢你Cletus！完美的作品！ – sjsc

我认为在这种情况下，你不应该显示/隐藏不同div的，但是对于一个DIV适用不同的类来代替。

来源

2010-02-14 13:53:33

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

来源

2010-02-14 13:53:55

谢谢James！我想给你所有的复选标记。非常感谢。 – sjsc

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

来源

2010-02-14 14:00:33 boxfrommars

jquery：选择菜单来显示和隐藏某些div元素

回答

相关问题