1

Tengo una base de datos con varias tablas relacionadas, una tabla de productos relacionada con una de categorías, lo que quiero es mostrar a través de un <select> todas las categorías(eso si lo puedo hacer) pero que al seleccionar una me de todos los productos que pertenecen a esa categoría!.

Así muestro las categorías

<?php 
  $db = new mysqli('localhost', 'root', '', 'bd_productos3' );
  if($db->connect_errno){
    die('Error');
  }
  $result = $db->query("SELECT * FROM clasificacion");
  $htmlPJ = '<form action="" method="post">';
  $htmlPJ .= 'Clasificacion <select id="select">';
  $sql = "select * from clasificacion";
  while($row = $result->fetch_assoc()){
    $htmlPJ.= "<option  value='{$row['id_clasificacion']}' > {$row['nombre_clasificacion']} </option>";
  }
  $htmlPJ .= '</select>';
  $htmlPJ .= '<input type="submit" value="Buscar" name="enviar">';
  $htmlPJ .= '</form>';
  echo $htmlPJ;
?>

necesito que al seleccionar una categoría me muestre los productos que están relacionados con esa categoría.

Les agradezco sus comentarios

4
  • Deberás hacer otra consulta con un filtro que recogerás en la parte cliente, dónde lo usarás para formar la sql query Commented el 20 sept. 2016 a las 19:11
  • Deberías usar ajax.
    – Dev. Joel
    Commented el 20 sept. 2016 a las 19:23
  • estoy null en ajax y jquery :( Commented el 20 sept. 2016 a las 19:28
  • Una alternativa a ajax es enviar parametros por GET y recargar esa pagina con la información que envias por la url. Commented el 20 sept. 2016 a las 19:56

2 respuestas 2

2

Deberias trabajar con javascript, echarle un vistazo a jQuery o algun framework JS, claro esta que antes familiarizarte con estos conceptos de ajax y otros relacionados a este tipo de actividades. Te comparto un mini script de como se trabajaría esto con jQuery.

$('#category_select').on('change', function(e) {
  var categorySelected = this.value;
  $.ajax(function() {
    method: 'post',
    data: {categoria: categorySelected},
    dataType: 'json',
    url: 'archivodeproductos.php',
    success: function(productos) {
      $.each(productos, function(index, element) {
        // Aca imprimirias tus productos a como los muestres creando el html con jQuery..
      })
    }

  })

});

Y pues en php recibirias el valor enviado en archivodeproductos.php para hacer la peticion a la base de datos y devolver los valores de productos que encontro, para asi mostrarlos a traves de jquery.

$categoriaSeleccionada = $_POST['categoria'];
// Aqui haces tu consulta a la base datos con la categoria seleccionada..
// Al final guardas en un arreglo tus productos y los envias de regreso..
// Para imprimirlo con jQuery
echo json_encode($productos)

Espero te sea útil y puedas completar esto. Saludos

2

Yo lo hago de la siguiente manera.

Mi HTML

<div id="estadoList"></div><br>
<div id="municipioList"></div><br>
<div id="parroquiaList"></div><br>

Mi JS

function getEstado(){

    if(window.XMLHttpRequest){
        xmlhttp3 = new XMLHttpRequest();
    }else{
        xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp3.onreadystatechange = function(){
        if(xmlhttp3.readyState==4 && xmlhttp3.status==200){
            document.getElementById("estadoList").innerHTML=xmlhttp3.responseText;
        }
    }
    xmlhttp3.open("GET","includes/getEstado.php",true);
    xmlhttp3.send();
}
//****************************************************************
function getMunicipio(ciudad_id){

    if(window.XMLHttpRequest){
        xmlhttp3 = new XMLHttpRequest();
    }else{
        xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp3.onreadystatechange = function(){
        if(xmlhttp3.readyState==4 && xmlhttp3.status==200){
            document.getElementById("municipioList").innerHTML=xmlhttp3.responseText;
        }
    }
    xmlhttp3.open("GET","includes/getMunicipio.php?idestado="+ciudad_id,true);
    xmlhttp3.send();
}

//****************************************************************
function getParroquia(muncipio_id){

    if(window.XMLHttpRequest){
        xmlhttp3 = new XMLHttpRequest();
    }else{
        xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp3.onreadystatechange = function(){
        if(xmlhttp3.readyState==4 && xmlhttp3.status==200){
            document.getElementById("parroquiaList").innerHTML=xmlhttp3.responseText;
        }
    }
    xmlhttp3.open("GET","includes/getParroquia.php? idmunicipio="+muncipio_id,true);
    xmlhttp3.send();
}

Este codigo lo que hace es buscarte un estado de tu base de datos, de ahi seleccionas uno y te aparece otro select con los municipios de ese estado y luego igual que arriba pero aparecen las parroquias.

Yo uso esa función amigo, solo cámbiala a tu gusto y ya. Espero la puedas entender, aunque con PHP sabrás como se usa el method GET así que esos cambios no te serán dificiles.

Espero poderte ayudar y no recuerdo el nombre de donde saque el codigo para darle el crédito :)

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.