0

Olá!

Tenho dois combos, um categoria outro tipo de categoria! ambos já está preenchidos com valores do banco de dados! Gostaria que ao selecionar categoria, o combo tipo de categoria só listar os valores do tipo de categoria da categoria selecionada sem utilizar ajax para busca e filtro! como já vem tudo preenchido uma forma de fazer via javascript mesmo para filtrar esses dados! é possível?

Exemplo: 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>

Quando selecionar a categoria, apresentar os resultados relacionados da categoria no combo tipo de categoria sem usar ajax

4
  • 2
    Sim, mas precisamos do código e de um Exemplo Mínimo, Completo e Verificável, de preferência.
    – Woss
    Commented 22/01/2018 às 13:09
  • @AndersonCarlosWoss coloquei o exemplo.
    – lelopes
    Commented 22/01/2018 às 13:27
  • E como você diferencia o que é "Delivery" ou "Gastronomia"?
    – Woss
    Commented 22/01/2018 às 13:31
  • @AndersonCarlosWoss Ainda não fiz na listagem, mas no banco de dados está tudo relacionado! Eu perguntei uma forma de fazer isso sem precisar utilizar ajaxa, se tiver que colocar um atributo no tipo de categoria informando qual categoria pertencente, pode coloca, mas agora como listar os tipo de acordo com a categoria selecionada sem utilizar ajax que eu gostaria de saber
    – lelopes
    Commented 22/01/2018 às 13:35

2 Respostas 2

1

@lelopes

Criei um atributo chamado "cat" e coloquei dentro do "option" como se seu PHP estivesse imprimindo isso. Dessa forma você pode acessar cada linha do seu 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>

Para acessar as linhas você pode usar (no caso do atributo cat=10):

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

Fiz essa função que esconde os elementos option que não estão sendo selecionados de acordo com a relação do value do "select" do tipo de comida e do atributo "cat" que criei.

<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>

Fiz um teste na minha máquina e funcionou certinho, espero que seja o que está precisando. Dá para fazer muita coisa com Jquery. Abraço.

1

Uma forma de relacionar um select com outro pode ser através da adição um atributo personlizado nas opções do seu select secundário.

No exemplo abaixo eu crio o atributo data-categoria nas opções de tipo de categoria classificando a qual categoria cada tipo pertence.

No javascript tenho uma função que verifica o dataset toda vez que a categoria é modificada e habilita as opções relacionadas.

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>

2
  • 2
    Só um detalhe: no HTML 5 recomendasse utilizar o prefixo data- em atributos personalizados, ficando, neste caso, data-categoria. Como alternativa ao elemento.getAttribute("categoria"), desta forma, pode utilizar o elemento.dataset.categoria.
    – Woss
    Commented 22/01/2018 às 19:56
  • Nossa, muito mais fácil editei a resposta, vou incluir essa informação. Commented 23/01/2018 às 12:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .