CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mike
Mike

Reputation: 37

Script Help: Using drop down list to show / hide divs with several classes

I have a list of divs that are being displayed on a landing page. Each div has several classes applied and I am trying to create some script that will allow a user to only display the divs that have the class selected.

Here is the code i have so far.

$('#month-select').on('change', function () {
  if(this.value === "jan"){
    $(".jan").show();
  } else {
    $(".rResult").hide();
  }
});
$('#month-select').on('change', function () {
  if(this.value === "feb"){
    $(".feb").show();
  } else {
    $(".rResult").hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="month-select" id="month-select">
  <option id="select">Select a Month</option>
  <option value="jan" id="jan" name="jan">January</option>
  <option value="feb" id="feb" name="feb">February</option>
  <option value="mar" id="mar" name="mar">March</option>
  <option value="apr" id="apr" name="apr">April</option>
  <option value="may" id="may" name="may">May</option>
  <option value="jun" id="jun" name="jun">June</option>
  <option value="jul" id="jul" name="jul">July</option>
  <option value="aug" id="aug" name="aug">August</option>
  <option value="sep" id="sep" name="sep">September</option>
  <option value="oct" id="oct" name="oct">October</option>
  <option value="nov" id="nov" name="nov">November</option>
  <option value="dec" id="dec" name="dec">December</option>
</select> 
<div id="fulllist">
  <div class="rResult jan mar apr may">
    <h3>Spring and January</h3>
    <ul>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
    </ul>
    <a href="#">CTA</a>
  </div>
  <div class="rResult apr may dec">
    <h3>April May December</h3>
    <ul>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
    </ul>
    <a href="#">CTA</a>
  </div>

  <div class="rResult july">
    <h3>July Only</h3>
    <ul>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
    </ul>
    <a href="#">CTA</a>
  </div>
</div>

Upvotes: 2

Views: 27

Answers (1)

Ricky Goldman
Ricky Goldman

Reputation: 349

You are on the right track. Here is what I've come up with:

$('#month-select').change(function(){
    $('.rResult').each(function(){
        if ($(this).hasClass($('#month-select').val())) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});

here is a working fiddle: https://jsfiddle.net/dof55mu5/5/

Upvotes: 1

Related Questions