根據下拉框選擇顯示/隱藏多個div

Question

我有一個組合框，其值分別為1,2,3和4。 我也有4個div，分別命名為div1，div2，div3和div4。

我想要一個具有以下條件的javascript：-從組合框中選擇值1時，它應該顯示div1-從組合框中選擇值2時，它應該顯示div1和div2-從組合框中選擇值3時，它應該顯示div1 ，div2和div3-從組合框中選擇值4時，它應顯示div1，div2，div3和div4-再次單擊組合框中的值2，它應自動隱藏div3和div4，並且僅顯示div1和div2

我在stackoverflow上發現了一些小玩意兒，但是它並不能滿足我的需要。

我盡力做到這一點，但最終我還是切換了一個div。

Answer 1

試試看-單選按鈕可以幫助控制狀態，您可以相應地顯示這些div。 這是一篇關於單選按鈕黑客的好文章http://alistapart.com/article/radio-control-web-design

Answer 2

這可以使用on change事件來實現。

$(document).on('change','#combobox',function(){
    var selected = $("#combobox option:selected").val;
    switch(selected){
        case '1': /* do something */ break;
        case '2': /* do something */ break;
        case '3': /* do something */ break;
        default: break;
    }
})

Answer 3

嘗試這個。 這樣可以讓您按順序顯示div。

$('div').hide();
$('select').click(function()
{ 
    var targetDiv = $("#div" + $(this).val());
    var prevDiv = $($("#div" + $(this).val())).prev('div');
    if($(this).val() == "1" || prevDiv.is(":visible") )
      $("#div" + $(this).val()).show();

});

http://jsfiddle.net/o5y9959b/3/

更新：

為了顯示帶有組合選擇值直到1st div的項目，只需以相反的順序執行for循環即可。

$('div').hide();
$('select').click(function()
{ 
    $('div').hide(); // remove this if you don't want to hide all of them 
    for(var i = $(this).val() ; i >= 1 ; i--)
        $("#div" + i).show();      
});

http://jsfiddle.net/o5y9959b/6/

Answer 4

你可以這樣做 ：

 $(document).on('change','#combobox',function(){ var selected = $("#combobox option:selected"); if ($("#div" + selected.val()).length > 0) { $("#div" + selected.val()).prevAll().show(); $("#div" + selected.val()).nextAll().hide(); $("#div" + selected.val()).show(); } else { $('.container > div').show(); } }); 

 div { height: 30px; } #div1 { background-color:green; } #div2 { background-color:orange; } #div3 { background-color:blue; } #div4 { background-color:red; } #div5 { background-color:#c23abc; } #div6 { background-color:#c2da2c; } #div7 { background-color:#e26ab1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <select id="combobox" name="select"> <option value="all">Show all</option> <option value="1">Show till div 1</option> <option value="2">Show till div 2</option> <option value="3">Show till div 3</option> <option value="4">Show till div 4</option> <option value="5">Show till div 5</option> <option value="6">Show till div 6</option> <option value="7">Show till div 7</option> </select> <div class="container"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div> <div id="div6"></div> <div id="div7"></div> </div> 

希望這可以幫助！！！