Uma forma de relacionar um `select` com outro pode ser através da adição um [atributo personlizado][1] 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][2] toda vez que a categoria é modificada e habilita as opções relacionadas. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 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); <!-- language: lang-html --> <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> <!-- end snippet --> [1]: https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Using_data_attributes [2]: https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLElement/dataset