How to make a select html load a list of options each time another select change selection?

Question

How to make a select html load a list of options each time another select change selection?

Navigation

#1 by (4 votes)

1

I need to have a select load a list of option each time on a previous select change of selection. I know I will use JavaScript to do this, but how?

Follow the code:

<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>

However, the " Controlling and Business " sectors of the first select are different, and when I select each one in the first, the sectors below appear in the second select.

Thank you in advance for helping me.

javascript html jquery ajax

asked by anonymous 30.03.2016 / 17:08

1 answer

IF condition within input Make calculations based on PHP or MySQL averages

score 4 · Accepted Answer

Hello, I have done with pure JS, there are several other ways to do it ...

<!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>

Any questions are available, Hope this helps! Hugs