Skip to main content
1 de 3
Caique Romero
  • 7,2mil
  • 2
  • 24
  • 51

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

No exemplo abaixo eu crio o atributo categoria nas opções de tipo de categoria classificando a qual categoria cada tipo pertence. No javascript tenho uma função que verifica 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].getAttribute("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 categoria="1" value='1' disabled>Pizza</option>
      <option categoria="1" value='2' disabled>Peixe</option>
      <option categoria="2" value='3' disabled>Carne</option>
      <option categoria="2" value='4' disabled>Salada</option>
  </select>
</div>

Caique Romero
  • 7,2mil
  • 2
  • 24
  • 51