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>

这是一个包裹在包装内的项目

<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

如果您的<div class="item schade">是与<option value="schade">相关联的div的示例，则以下代码应该有效。

$('#filterOptions2').change(function() {
    var value = $(this).val();
    if(value == "scahde") {
    //handle showing the element here.
    }
});

Answer 2

请试试这个。

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

请检查以下工作snipet。

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

下拉过滤器

2 个答案: