Filtered data inside the combo

@lelopes

I created an attribute called "cat" and put it inside the "option" as if your PHP was printing it. This way you can access each line of your combo.

<select name="tcat" id="tcat">
                      <option value="">Comidas</option>
                      <option value='11' cat="10">Comida de Buteco</option>
                      <option value='10' cat="10">Francesa</option>
                      <option value='12' cat="11">Comida de Buteco</option>
                      <option value='14' cat="11">Comida Saudavel</option>
                      <option value='15' cat="11">Chinesa</option>
                      <option value='19' cat="11">Pizzaria</option>
                    </select>

To access the rows you can use (in the case of the cat = 10 attribute):

$ ('# tcat option [cat = 10]'). val ()

I made this function that hides the option elements that are not being selected according to the relation of the value of the "select" type of food and the "cat" attribute I created.

<script>

$(document).ready(function(){
  var cat = '';
  $("#cat").change(function(){
    var cod_cat = $('#cat option:selected').val();
    $("#tcat option").each(function(){
      cat = $(this).attr("cat");
      if (cat != cod_cat) {
        $(this).hide();
      }else {
        $(this).show();
      }
    });

  });
});

</script>

I ran a test on my machine and it worked fine, hopefully that's what you need. You can do a lot with Jquery. Thanks.

One way of relating a select to another can be by adding a attribute personlized in the options of your select secondary.

In the example below I create the data-categoria attribute in the category type options by classifying which category each type belongs to.

In javascript I have a function that checks the dataset every time the category is modified and enables related options.

var categoria     = document.getElementById("categoria");
var tipoCategoria = document.getElementById("tipoCategoria");

categoria.addEventListener("change", function(){

  if(categoria.value != ""){
    tipoCategoria.value = "";
    for(var i=0; i<tipoCategoria.length; i++){
      if(tipoCategoria.options[i].dataset.categoria == categoria.value){
         tipoCategoria.options[i].disabled=false;
      }else{
         tipoCategoria.options[i].disabled=true;
      }
    }
    
  }else{
    tipoCategoria.value = "";
    for(var i=0; i<tipoCategoria.length; i++){
      tipoCategoria.options[i].disabled= true;
    }
  }
}, false);

<div>
  <label for="categoria">Categoria</label>
  <select name="categoria" id="categoria">                    
      <option value="">Todas as Categorias</option>        
      <option value='1'>Delivery</option>
      <option value='2'>Gastronomia</option>
  </select>
</div>

<div>
  <label for="categoria">Tipos da categoria selecionada</label>
  <select name="tipoCategoria" id="tipoCategoria">                    
      <option value="">Todas os tipos</option>        
      <option data-categoria="1" value='1' disabled>Pizza</option>
      <option data-categoria="1" value='2' disabled>Peixe</option>
      <option data-categoria="2" value='3' disabled>Carne</option>
      <option data-categoria="2" value='4' disabled>Salada</option>
  </select>
</div>