How to Switch Input Select according to Radio Button

Asked

Viewed 1,189 times

0

How can I make a Radio Button display an Input select for it

      Radio x  ---> mostrar Select x
      Radio y  ---> mostrar Select y  

    <input type="radio" name="x" />
    <input type="radio" name="y" />

   <select size="1" name="unid" class="form-control">
    <option value="">Nª de Passageiros</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="02">03</option>
    <option value="04">04</option>
    </select>


    <select size="1" name="unid" class="form-control">
    <option value="">Veiculos</option>
    <option value="Sedan">Sedan</option>
    <option value="Van">Van</option>
    <option value="Micro-Onibus">Micro</option>
    <option value="Onibus">Onibus</option>
    </select>
javascript

  • Javascript another time wrong tag....

  • What is "Select x" and what is "Select y"? Your HTML does not show, improve it or explain in more detail.

  • can be the first select x and the second y

  • Okay but I also don’t know what you mean by "show up an Input select for it", show up as? in its html the two "appear", has no hidden with something like a css "display: None", da an edited that the question is very bad.

  • And so. a select this shows it. and another hidden, by clicking on the x radio show select x and hide select y and vice versa.....

1 answer

2

If I understand your question, you will need to initialize the selects hidden, as said in the comments. After selecting a radio you show the select chosen.

In the example lowered I created the function mostraSelect() check that the radio for passengers is marked. If yes it shows and hides the radio for vehicles, and vice versa.

#ddlPassgeiros{
  display:none;
}
#ddlVeiculos{
  display:none;
}
  <script>
  
function mostraSelect() {
    if (document.getElementById('rbPassageiro').checked) {
        document.getElementById('ddlPassgeiros').style.display = 'block';
         document.getElementById('ddlVeiculos').style.display = 'none';
    }
    else{
         document.getElementById('ddlPassgeiros').style.display = 'none';
        document.getElementById('ddlVeiculos').style.display = 'block';
    }
}</script>
  <input type="radio" name="x" onclick="javascript:mostraSelect();" id="rbPassageiro"/>Passageiros
   <input type="radio" name="x" onclick="javascript:mostraSelect();"id="rbVeiculo"/>Veiculos
<br/>
   <select size="1" name="unid" class="form-control" id="ddlPassgeiros">
    <option value="">Nª de Passageiros</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="02">03</option>
    <option value="04">04</option>
    </select>


    <select size="1" name="unid" class="form-control" id="ddlVeiculos">
    <option value="">Veiculos</option>
    <option value="Sedan">Sedan</option>
    <option value="Van">Van</option>
    <option value="Micro-Onibus">Micro</option>
    <option value="Onibus">Onibus</option>
    </select>

Browser other questions tagged javascript

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