The code works on the first filter but when I choose the second filter it performs a new search and ignores the first one. How do I make the filters work simultaneously.
Follow the code
$(document).ready(function(){
$("#filtro select").change(function(){
var categoria = this.id;
var pesquisa = $(this).val().toLowerCase();
$(".produto").find('.'+categoria).each(function(){
var textoCategoria = $(this).text();
var corresponde = textoCategoria.toLowerCase().indexOf(pesquisa) >= 0;
$(this).parent().css('display', corresponde ? '' : 'none');
});
});
});
div#filtro {
background: #DDDDDD;
width: 94%;
margin: 0 0 2% 2%;
padding: 20px 2%;
}
div.produto {
background: #DDDDDD;
width: 31.3%;
height: 200px;
margin: 0 0 2% 2%;
float: left;
display: block;
}
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script><divid="filtro">
Pesquisar produtos:
<select id="frente">
<option select>Frente</option>
<option value="8">8 metros</option>
<option value="10">10 metros</option>
<option value="12">12 metros</option>
<option value="20">20 metros</option>
</select>
<select id="dormitorio">
<option select>Dormitórios</option>
<option value="2">2 Dormitórios</option>
<option value="3">3 Dormitórios</option>
<option value="4">4 Dormitórios</option>
</select>
</div>
<div id="produtos">
<div class="produto">
<div class="frente">8 metros</div>
<div class="dormitorio">2 Dormitorios</div>
<div class="banheiro">2 Banheiros</div>
<div class="garagem">1 Garagem</div>
</div>
<div class="produto">
<div class="frente">8 metros</div>
<div class="dormitorio">4 Dormitorios</div>
<div class="banheiro">3 Banheiros</div>
<div class="garagem">1 Garagem</div>
</div>
<div class="produto">
<div class="frente">10 metros</div>
<div class="dormitorio">4 Dormitorios</div>
<div class="banheiro">1 Banheiros</div>
<div class="garagem">2 Garagem</div>
</div>
<div class="produto">
<div class="frente">12 metros</div>
<div class="dormitorio">3 Dormitorios</div>
<div class="banheiro">2 Banheiros</div>
<div class="garagem">1 Garagem</div>
</div>
<div class="produto">
<div class="frente">20 metros</div>
<div class="dormitorio">2 Dormitorios</div>
<div class="banheiro">2 Banheiros</div>
<div class="garagem">1 Garagem</div>
</div>
</div>