How to have two or more dynamic filters in the same product group with Javascript?

Question

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 get the filters to work simultaneously.

Follows 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>
<div id="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>

Answer 1

$(document).ready(function() {
  $("#filtro select").change(function() {
    applyFilter();
  });

  function applyFilter() {
    $(".produto").css('display', '');
    $("#filtro select").each(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 || pesquisa == '-';
        if (!corresponde) {
          $(this).parent().css('display', '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>
<div id="filtro">
  Pesquisar produtos:
  <select id="frente">
    <option value="-" 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 value="-" 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>