2

Estou precisando fazer com que um select carregue uma lista de option cada vez que em um outro select anterior mude de seleção. Sei que usarei JavaScript para fazer isso, mas como?

Segue o código:

<b>Área:</b></td>
<select name="area" id="area">
           <option value="Controladoria">Controladoria</option>
           <option value="Negócios">Negócios</option>
           </select>

<b>Setor:</b>
<select name="setor" id="setor">
           <option value="SETOR 1 (CONTROLADORIA OU NEGÓCIOS)">SETOR 1 (CONTROLADORIA OU NEGÓCIOS)</option>
           <option value="SETOR 2 (CONTROLADORIA OU NEGÓCIOS)">SETOR 2 (CONTROLADORIA OU NEGÓCIOS)</option>
           <option value="SETOR 3 (CONTROLADORIA OU NEGÓCIOS)">SETOR 3 (CONTROLADORIA OU NEGÓCIOS)</option>
            <option value="SETOR 3 (CONTROLADORIA OU NEGÓCIOS)">SETOR 4 (CONTROLADORIA OU NEGÓCIOS)</option>
           </select>

Porém, os setores de "Controladoria" e "Negócios" do primeiro select são diferentes, e quando eu selecionar cada um no primeiro, apareça os respectivos setores abaixo no segundo select.

Agradeço desde já quem puder me ajudar.

2
  • Talvez essa pergunta te ajude: pt.stackoverflow.com/questions/14646/… Commented 30/03/2016 às 15:11
  • Faz tempo que foi postado, mas nao custa tentar. Teria como fazer aparecer um texto depois que selecionado o 2o select? Por exemplo aparecer um contato de alguem do setor que foi selecionado. Irei adaptar para aparecer uma loja que revenda o produto, em determinada cidade. Ex. Escolhe UF: SP, Escolhe cidade: Campinas, e abre os contatos da loja que atende em campinas. <!-- begin snippet: js hide: false console: false babel: false --> <!-- language: lang-html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <b>Área:</b></td> <select name= Commented 25/10/2018 às 21:31

1 Resposta 1

7

Ola, fiz com JS puro, tem diversas outras formas de se fazer...

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <b>Área:</b></td>
    <select name="area" id="area" onchange="changeSelect();">
        <option value="">Selecione uma área</option>
        <option value="Controladoria">Controladoria</option>
        <option value="Negócios">Negócios</option>
    </select>

    <b>Setor:</b>
    <select name="setor" id="setor">      
        <option value="">Selecione Setor</option>  
    </select>

  <script type="text/javascript">
    function changeSelect(){

        var select = document.getElementById('area');
        var selectSetor = document.getElementById('setor');

        var value = select.options[select.selectedIndex].value;

        //remove itens
        var length = selectSetor.options.length;        
        var i;
        for(i = selectSetor.options.length-1 ; i>=0 ; i--)
        {
            selectSetor.remove(i);
        }


        if(value == 'Controladoria') {

            var option = document.createElement('option');
            option.value = '1';
            option.text = 'SETOR 1 (CONTROLADORIA)';

            var option2 = document.createElement('option');
            option2.value = '2';
            option2.text = 'SETOR 2 (CONTROLADORIA)';

            selectSetor.add(option);
            selectSetor.add(option2);

        } else if (value == 'Negócios'){

            var option3 = document.createElement('option');
            option3.value = '3';
            option3.text = 'SETOR 3 (NEGÓCIOS)';

            var option4 = document.createElement('option');
            option4.value = '4';
            option4.text = 'SETOR 4 (NEGÓCIOS)';

            selectSetor.add(option3);
            selectSetor.add(option4);

        }   
    }
</script>
    </body>
</html>

Qualquer dúvida estou á disposição, espero ter ajudado! Abraços

1
  • 1
    Cara, muito obrigado mesmo! É justamente isso o que eu precisava. Obrigado de verdade man! :D Commented 30/03/2016 às 18:17

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 .