javascript - 脚本帮助 : Using drop down list to show/hide divs with several classes

Question

我有一个显示在着陆页上的 div 列表。每个 div 都应用了几个类，我正在尝试创建一些脚本，允许用户只显示选择了类的 div。

这是我目前的代码。

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

Answer 1

您走在正确的轨道上。这是我想出的:

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

这是一个工作 fiddle :https://jsfiddle.net/dof55mu5/5/