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>