javascript - 下拉过滤器

Question

我想制作一个下拉过滤器，当您单击某个值时，它仅显示具有该特定类别的图像。谁能帮我？菜单代码见下

<select id="filterOptions2">
  <option value="active"><a href="#" value="all">All</a></option>
  <option value="MT">MT</a></option>
  <option value="secretariaat">Secretariaat</a></option>
  <option value="schade">Schade</a></option>
  <option value="acceptatie">Acceptatie</a></option>
  <option value="hypotheken">Hypotheken/Financiele planning</a></option>
  <option value="pensioen">Pensioen</a></option>
</select>

这是一个包裹在 wrapper 内的元素

<div id="teamwrapper">
    <div class="item schade">
      <img src="<?php echo $view->getThemePath() ?>/assets/images/dummy.png" alt="Arthur" class="hvrbox-layer_bottom">
        <div class="hvrbox-layer_top">
          <div class="hvrbox-text">
            <h5>Naam</h5><br><p>Titel</p>
          </div><!--End text-->
        </div><!--end layer top-->
      </div><!--End item-->
    </div>
</div>

Answer 1

请尝试一下这个。

//Dropdown change event
$('#filterOptions2').on('change',function() {
  var value = $(this).val();
  if(value=='active'){
    $('div.item').show();
  }else{
    $('div.item').hide();
    $('.'+value).show();
  }
});

请检查下面的工作片段。

$('#filterOptions2').on('change',function() {
  var value = $(this).val();
  if(value=='active'){
    $('div.item').show();
  }else{
    $('div.item').hide();
    $('.'+value).show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="filterOptions2">
  <option value="active"><a href="#" value="all">All</a></option>
  <option value="MT">MT</a></option>
<option value="secretariaat">Secretariaat</a></option>
<option value="schade">Schade</a></option>
<option value="acceptatie">Acceptatie</a></option>
<option value="hypotheken">Hypotheken/Financiele planning</a></option>
<option value="pensioen">Pensioen</a></option>
</select>

<div id="teamwrapper">
  <div class="item schade">
    <img src="<?php echo $view->getThemePath() ?>/assets/images/dummy.png" alt="Arthur" class="hvrbox-layer_bottom">
    <div class="hvrbox-layer_top">
      <div class="hvrbox-text">
        <h5>Naam</h5><br><p>Titel</p>
      </div><!--End text-->
    </div><!--end layer top-->
  </div><!--End item-->
  <div class="item acceptatie">
    <img src="<?php echo $view->getThemePath() ?>/assets/images/dummy.png" alt="Arthur" class="hvrbox-layer_bottom">
    <div class="hvrbox-layer_top">
      <div class="hvrbox-text">
        <h5>Naam-2</h5><br><p>Titel-2</p>
      </div><!--End text-->
    </div><!--end layer top-->
  </div><!--End item-->
  <div class="item acceptatie">
    <img src="<?php echo $view->getThemePath() ?>/assets/images/dummy.png" alt="Arthur" class="hvrbox-layer_bottom">
    <div class="hvrbox-layer_top">
      <div class="hvrbox-text">
        <h5>Naam-3</h5><br><p>Titel-3</p>
      </div><!--End text-->
    </div><!--end layer top-->
  </div><!--End item-->
</div>