Выпадающий фильтр

Я хочу сделать раскрывающийся фильтр, который, когда вы нажимаете на определенное значение, показывает только изображения с этим конкретным классом. Может кто-нибудь мне помочь? Код меню см. Внизу

<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>

javascript dropdown filter jquery
person Jochem Kroos    schedule 09.11.2016    source источник
comment
Измените src в соответствии со значением параметра.   -  person Offir    schedule 09.11.2016
comment
вы отметили jquery, поэтому я бы сделал что-нибудь вроде $ ('# filterOptions2) .on (' change 'function () {$ ('. '+ $ (this) .val ()). show ()}); предполагая, что изображения по умолчанию скрыты.   -  person IYH    schedule 09.11.2016

Ответы (2)


arrow_upward
-1
arrow_downward

Примерьте вот это.

//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>

person Rahul Patel    schedule 09.11.2016
comment
Спасибо, но если я использую это, все изображения скрываются при нажатии. Изображения не отображаются: по умолчанию нет. Я новичок в JQuery, есть ли предложения? - person Jochem Kroos; 09.11.2016
comment
Пожалуйста, проверьте мой обновленный ответ ... Я уже решил это ... и, пожалуйста, также проверьте обновленный фрагмент ... - person Rahul Patel; 09.11.2016
comment
Все еще не повезло, @Rahul Patel. Кажется, что изображения не загружаются, только на всех это помогает - person Jochem Kroos; 09.11.2016
comment
Вы имеете в виду, что изначально все изображения скрыты ... и все загружается, когда все параметры выбраны из раскрывающегося списка? - person Rahul Patel; 09.11.2016
comment
Нет, изображения не скрыты изначально, но когда я выбираю, например, schade, все изображения исчезают, а когда я возвращаюсь ко всем, они появляются. Так что это единственная ссылка на рабочий банкомат - person Jochem Kroos; 09.11.2016

arrow_upward
-1
arrow_downward

При условии, что ваш <div class="item schade"> является примером соединения div с <option value="schade">, следующий код должен работать.

$('#filterOptions2').change(function() {
    var value = $(this).val();
    if(value == "scahde") {
    //handle showing the element here.
    }
});
person Captain Squirrel    schedule 09.11.2016
comment
Мне не нравится это предложение из-за отсутствия гибкости - не хочу ли я сейчас добавлять новый if для каждого нового случая? - person Lain; 09.11.2016