Filtered data within the combo

Question

Hello!

I have two combos, a category other type of category! both are already filled with values from the database! I would like that when selecting category, the category type combo only list the category type values of the selected category without using ajax for search and filter! as it comes all filled a way to do via javascript even to filter this data! is possible?

Example: Combo Categoria:

<select name="cat" id="cat">                    
    <option value="">Todas as Categorias</option>        
    <option value='11'>Delivery</option>
    <option value='10'>Gastronomia</option>
</select>

Combo Tipo de Categoria ( lista todos os tipos)

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

When selecting the category, display the related category results in the category type combo without using ajax

Answer 1

A way to relate a select with another can be by adding one personified attribute in the options of your select secondary school.

In the example below I create the attribute data-categoria in the category type options 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>

Answer 2

@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 lines you can use (in the case of the attribute cat=10):

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

I made this function that hides option elements that are not being selected according to the "select" value ratio of the food type and "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 did a test on my machine and it worked right, I hope it’s what you need. You can do a lot with Jquery. Hug.