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

回答

相關問題