我要创建一个下拉过滤器,当您单击某个值时,它仅显示具有该特定类的图像。谁能帮我?有关菜单代码,请参见
<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>
最佳答案
请试试这个。
//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>