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

Question

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

Asked 8 years, 7 months ago

Viewed 6,201 times

2

I am needing to have a select load an option list each time in a previous select change selection. I know I’ll use Javascript to do this, but how?

Follows 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 sectors of "Controllership" and "Business" of the first select are different, and when I select each one in the first, appear the respective sectors below in the second select.

I appreciate anyone who can help me.

Maybe this question will help you: http://answall.com/questions/14646/como_selectr-uma-op%C3%A7%C3%A3o-em-um-select-e-carregar-related data-in-another? Rq=1

– Richard Dias

2016/03/30 at 15:11
It has been a while since it was posted, but it wouldn’t hurt to try. Would it be possible to make a text appear after selecting the 2nd select? For example appear a contact from someone in the sector who was selected. I will adapt to appear a store that resells the product in a certain city. Ex. Choose UF: SP, Choose city: Campinas, and open the contacts of the store that serves in campinas. <! -- Begin snippet: js Hide: false console: false Babel: false -->  <!DOCTYPE html> <lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <b>Area:</b></td> <select name=

– Maikon Felipe Borges

2018/10/25 at 21:31

1 answer

Browser other questions tagged javascript jquery html ajax

You are not signed in. Login or sign up in order to post.

by Guilherme Sanches • **394** points · Answer 1 · 2016-03-30T16:09:25+00:00

Hello, I did with pure JS, there are several other ways to do...

<!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 doubt I’m at your disposal, I hope I helped! Hugs