1

Hola espero por favor me puedan ayudar. Tengo una lista de productos q estoy mostrando con un while para listarlos, quiero hacer un filtro por colores con un select pero con la consulta que ya está hecha, ya que de momento el filtro lo estoy haciendo pero con un submit y pues no quiero que recargue la pagina para hacer el index.

Edito pq encontré un caso similar y decidí aplicarlo... Pero no está funcionando como debería, si reviso en consola de hecho el div si toma el value del color, pero al realizar cualquier seleccion en el select no toma ninguna sino que no esconde todo.

Este es el código del select y los colores:

<form class="form-inline  justify-content-around">
      <div class="col-md-4">
      <select class="form-control" name="filtroColor" id="filtros3">
          <option value="">Selecciona un color</option>
          <option value="1">Blanco</option>
          <option value="2">Negro</option>
          <option value="3">Gris</option>
          <option value="4">Rojo</option>
          <option value="5">Amarillo</option>
        </select>
      </div>
    </form>

Este es el código de la consulta, y como se lista en el dom

    <div id="productos" class="row">
<?php
  try{
      $sql = " SELECT * FROM `productos` ";              
      $resultado = $conn->query($sql);
  }catch (\Exception $e){
      echo $e->getMessage();
  }
  ?>
  <?php
  while($producto = $resultado->fetch_assoc()){ ?>
    <div class="<?php echo $producto['color'];?> col-md-3 col-sm-6">
    <div class="galeria">
    <img src="<?php echo $producto['imagen'];?>" alt="">
    <p><?php echo $producto['nombre_producto'];?></p>
    <div class="container">
  <span><?php echo $producto['precio'];?></span>
  <div class="btn btn-light">
    <i class="fas fa-cart-arrow-down"></i>
  </div>
  </div>
  </div>
    </div>      
  <?php } ?>           
      </div>

Y este es el jquery

$(function(){
    var $tabla = $('#productos');

    $('#filtros3').change(function(){
        var value = $(this).val();
        if (value){
            $('div.' + value, $tabla).show();
            $('div:not(.' + value + ')', $tabla).hide();
        }
        else{
            $('div', $tabla).show();
        }
    });
})

De antemano muchas gracias por sus respuestas.

2
  • Hola, gracias por responder, creo q no es necesario hacerlo con ajax pq la consulta ya está hecha y listada, he leido un poco y he encontrado un caso similar, pero no logro que funcione en mi ejemplo, he actualizado el código de mi pregunto a ver si consigo alguna respuesta. Commented el 3 mar. 2019 a las 4:37
  • Ok.. lo he entendido entonces mal... te he dejado una posible respuesta.. Saludos! Commented el 3 mar. 2019 a las 5:47

2 respuestas 2

1

Creo haber entendido que quieres seleccionar los div's de la consulta según la selección de los colores del filtroColor, si es así el siguiente código sería una posible solución:

$(function(){
  
  $('#filtros3').on('change', function(){
    
    var value = $(this).val();
    
    // Ocultamos todos los contenedores de colores
    $('.c').hide();
    
    // Mostramos el color elegido
    $('.color_' +  value ).show();
    
  });
});
.c{
  
  display: none; /* Por defecto */
  
  width: 50px;
  height: 50px;
  margin: 10px;
  font-size: 13px;
  text-align: center;
  border: 1px solid #666;
}

.color_1{
  background-color: white;
}

.color_2{
  color: white;
  background-color: black;
}

.color_3{
  color: white;
  background-color: gray;
}

.color_4{
  color: white;
  background-color: red;
}

.color_5{
  background-color: yellow;
}
<select class="form-control" name="filtroColor" id="filtros3">
  <option value="">Selecciona un color</option>
  <option value="1">Blanco</option>
  <option value="2">Negro</option>
  <option value="3">Gris</option>
  <option value="4">Rojo</option>
  <option value="5">Amarillo</option>
</select>
<br>
<br>
<div class="c color_1">Color 1</div>
<div class="c color_2">Color 2</div>
<div class="c color_3">Color 3</div>
<div class="c color_4">Color 4</div>
<div class="c color_5">Color 5</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1
  • 2
    Muchas gracias, le he hecho un pequeño ajuste para que muestre todos y ya quedó perfecto, eso era lo que necesitaba. Mil gracias! Commented el 3 mar. 2019 a las 17:41
0

Investigando como hacer lo mismo que acá al compañero, sin querer lo logré hacer con menos código, espero les sea de utilidad:

$("#filtrito").on("change", function(){
            let barco = $(this).val();
            var combo =  document.getElementById("cod_barco");
            var indice=0;
            for (var i = 0; i < combo.length; i++) {
                var items = combo.options[i];
                if(items.text.indexOf(barco) > -1){
                    indice=i;
                    //alert(barco);
                    break;
                }
}
            combo.selectedIndex = indice;

Todo esto dentro del document.ready, filtrito es una caja de texto, cod_barco es un select que tiene muchos options, lo que hago es que al evento change de la caja de texto comparo por cada item del select que "contenga" la palabra buscada (barco) mendiante indexOf

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.