Olá pessoal,

No artigo de hoje mostrarei como criar um menu dropdown em cascata, muito utilizado em formulários de contato ou lojas virtuais, onde você seleciona por exemplo a categoria “Informática”, e no dropdown abaixo, é listado todos os itens da categoria Informática.

 


Como implementar?

Copie o código abaixo no final do seu arquivo footer.php ou functions.php:

    <script>
    var stateObject = {
    "Auxiliar de Farmácia": {
        "Capão da Canoa": ["Noite"],
        "Charqueadas": ["Noite"],
        "Passo Fundo": ["Tarde"],
        "Porto Alegre": ["Manhã", "Tarde"],
        "São Lourenço do Sul": ["Noite"],
        "Torres": ["Noite"]
    },
    "Auxiliar de Análises Clínicas": {
        "Camaquã": ["Noite"],
        "Campo Bom": ["Noite"],
        "Canguçu": ["Tarde"],
        "Lajeado": ["Tarde"],
        "Montenegro": ["Noite"]

    },
    "Monitora e Recreacionista Infantil": {
        "Gravataí": ["Noite"],
        "Passo Fundo": ["Noite"],
        "Santa Cruz do Sul": ["Noite"]
    }
    
}
window.onload = function () {
    var stateSel = document.getElementById("stateSel"),
        countySel = document.getElementById("countySel"),
        citySel = document.getElementById("citySel");
    for (var state in stateObject) {
        stateSel.options[stateSel.options.length] = new Option(state, state);
    }
    stateSel.onchange = function () {
        countySel.length = 1; // remove all options bar first
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          countySel.options[0].text = "Por favor, primeiro escolha o curso."
          citySel.options[0].text = "Por favor, primeiro escolha o local."
          return; // done   
        }  
        countySel.options[0].text = "Agora escolha a cidade que deseja cursar"
        for (var county in stateObject[this.value]) {
            countySel.options[countySel.options.length] = new Option(county, county);
        }
        if (countySel.options.length==2) {
          countySel.selectedIndex=1;
          countySel.onchange();
        }  
        
    }
    stateSel.onchange(); // reset in case page is reloaded
    countySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          citySel.options[0].text = "Por favor, primeiro escolha o local."
          return; // done   
        }  
        citySel.options[0].text = "Por favor, escolha a turma."
        
        var cities = stateObject[stateSel.value][this.value];
        for (var i = 0; i < cities.length; i++) {
            citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
        }
        if (citySel.options.length==2) {
          citySel.selectedIndex=1;
          citySel.onchange();
        }  
        
    }
}
</script>

E dentro do seu formulário de contato, utilize o seguinte código para chamar a função:

<label>Que curso quero fazer?
<form id="myForm" name="myform">

<select id="stateSel" name="optone" size="1">
<option selected="selected" value="">Curso</option>
</select>
</label>

<label>Que cidade quero fazer o curso?
<select id="countySel" name="opttwo" size="1">
<option selected="selected" value="">Por favor, primeiro escolha o curso.</option>
</select>
</label>

<label>Qual turno desejo cursar?
<select id="citySel" name="optthree" size="1">
<option selected="selected" value="">Agora escolha a cidade que deseja cursar</option>
</select></form>
</label>

Customizando as opções do dropdown

Aqui é onde você customiza as opções que aparecerão no menu:

wordpress javascript contact form

Nas linhas 37, 38, 41, 55 e 58, você muda as frases que aparecem nos labels.

É isso!

Se gostou, deixe um comentário aqui em baixo ou compartilhe nas suas redes sociais pra dar aquela força.

O código original foi desenvolvido por Michel Plungjan e você pode encontrá-lo aqui.

Posted by Gabriel Moraes

Criador e mantenedor do blog. Atuo na área de suporte à 4 anos e curso Análise e Desenvolvimento de Sistemas.