show/hide multiple divs based on dropdown box selection

Question

I have a Combobox which has the values 1,2,3 and 4 respectively. I also have 4 divs named div1, div2, div3 and div4 respectively.

I want a javascript with the following conditions: - when selected value 1 from the combobox, it should display div1 - when selected value 2 from the combobox, it should display div1 and div2 - when selected value 3 from the combobox, it should display div1, div2 and div3 - when selected value 4 from the combobox, it should display div1, div2, div3 and div4 - again if clicked on value 2 from the combobox, it should automatically hide div3 and div4 and should only show div1 and div2

I found some fiddles on stackoverflow, but it does not do what I need.

I tried hard to do that but in the end I end up toggling a single div.

Answer 1

Try this out - radio buttons can help control state, and you can display those divs accordingly with them. Here's a good article on the radio button hack http://alistapart.com/article/radio-controlled-web-design

Answer 2

This can be achieved using the on change event .

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

Try this. This would let you show the divs in the sequential order.

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

UPDATE :

In order to show items with combo select value til the 1st div, just perform a for loop in reverse order.

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

You can do this :

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

Hope this helps!!!