How to show/hide div when we select 'all' option

Question

I have a small requirement. I need to show and hide divs based on the option selected. Below is my code. Ho to show all green and red class div's when I select 'all' option. It works for red and green options. Thanks in advance.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorselector">
            <option>Choose Color</option>
            <option value="all">All</option>
      <option value="red">Red</option>
            <option value="green">Green</option>
    </select>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>


<script type="text/javascript">
$(function() {
  $('#colorselector').change(function(){
    $('.box').hide();
    $('.' + $(this).val()).show();
 
  });
});
</script>


    .box{
        color: #fff;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }

Possible duplicate of [show/hide div based on select option jquery](https://stackoverflow.com/questions/2975521/show-hide-div-based-on-select-option-jquery) — dippas, Nov 23 '18 at 12:25
**To Close Voters:** This is not a duplicate of the proposed duplicate. The proposed duplicate is, like this question, a debugging question. While the title of the proposed duplicate makes it seem like it might be a duplicate, the issues in the two questions are completely different. — Makyen, Nov 24 '18 at 00:20

Bhoomi Patel · Answer 1 · 2018-11-23T13:01:42.280

1

Try this code:

<select id="colorselector">
            <option>Choose Color</option>
            <option value="all">All</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
    </select>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>

Script:

<script type="text/javascript">
$(function() {
 $('#colorselector').on('change', function() {
  var data = $(this).val();
 if( data =='red')
 {
  $('.green').hide();
  $('.red').show();
 }
 else if($(this).val() =='green')
 {
  $('.green').show();
  $('.red').hide();
 }
 else
 {
  $('.green').show();
  $('.red').show();
 }
});
});
</script>

edited Nov 23 '18 at 13:01

answered Nov 23 '18 at 12:43

Bhoomi Patel

783
9
31

Thanks for your time Bhoomi, but my question is different. – Meggi Nov 23 '18 at 12:47
When I select the Red option it shows only red class, the green option it shows only green class and when I select all option it should show both red and green classes. – Meggi Nov 23 '18 at 12:56
Yes, it works Thank you Bhoomi. Here small change in your code -- if( data =='red') { $('.green').hide(); $('.red').show(); } – Meggi Nov 23 '18 at 12:59

score 0 · Answer 2 · answered Nov 23 '18 at 12:40

0

Use an if statement to detect if the user is selecting 'all'. Please check the below code.

$(function() {
  $('#colorselector').change(function(){

    $('.box').hide();

    //if user is selecting 'all', show all boxes
    if($(this).val() == 'all'){

        $('.box').show()

    //otherwise only show the color they select
    } else {

      $('.' + $(this).val()).show();

    }


  });
});

Here is a working JS Fiddle Example

answered Nov 23 '18 at 12:40

Shehara

101
3

Thank for your time Shehara. – Meggi Nov 23 '18 at 12:43
No problem, if it worked please select as the answer, thanks – Shehara Nov 23 '18 at 12:48

score -1 · Accepted Answer · answered Nov 23 '18 at 12:24

Since you'll only have one "all" option, you can do an "if" to check if that option was pressed:

$(function() {
  $('#colorselector').change(function(){
    if($(this).val()=="all"){
      $('.box').show();
    }else{
      $('.box').hide();
      $('.' + $(this).val()).show();
    }
  });
});

How to show/hide div when we select 'all' option

3 Answers3