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.