How to Switch Input Select according to Radio Button [closed]

Question

How to Switch Input Select according to Radio Button [closed]

Navigation

#1 by (1 votes)

0

How can I make an Input Select for it when selecting a Radio Button

      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

asked by anonymous 23.01.2016 / 04:22

1 answer

Error [INSTALL_FAILED_INVALID_URI] in GCC Call function in $ state.go () Ionic / Angular.js

score 1 · Answer 1

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

In the example below I created the mostraSelect() function to check if the passenger radius is checked. If yes it shows and hides the one referring to the 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>