Display information depending on what the user chooses

You should work with javascript, take a look at jQuery or some JS framework, of course before familiarizing yourself with these concepts of ajax and others related to this type of activity. I share a mini script of how this would work with 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..
      })
    }

  })

});

And then in php you would receive the value sent in productodeproductos.php to make the request to the database and return the values of products that you found, to show them through 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)

I hope it's useful for you and you can complete this. Greetings

I do it in the following way.

My HTML

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

My 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();
}

This code is what you do is look for a state from your database, from there you select one and another select appears with the municipalities of that state and then the same as above but the parishes appear.

I use that friend function, just change it to your liking and that's it. I hope you can understand it, although with PHP you will know how the GET method is used so those changes will not be difficult for you.

I hope I can help you and I do not remember the name of where I got the code to give you the credit:)