Hide/Show a drop-down list according to the Radio selected in HTML

Asked

Viewed 30 times

0

I have a code that shows me a radio

And I have a drop-down list code that’s hidden(hidden) and that should be displayed only if the radio is checked

I’m trying to create a Javascript Function for when the radio is checked, the drop-down list appears, but I’m not getting it. My script

Here is the code:

var radio01 = document.getElementsByName("radio01");
var ListaOpcoes = document.getElementsByName("ListaOpcoes");
 
function FuncRadio01() {               
   if(radio01[0].checked) {
      // Aqui deve ir código pra exibir o drop-down list,  mas não sei o que colocar.
     // Já tentei "ListaOpcoes.removeAttribute("hidden");" e não funcionou.
    // Já tentei "ListaOpcoes.show();" e não funcionou.
   }
}
Clique no botão:<input type="radio" name="radio01" id="radio01" value="radio01" onclick="FuncRadio01()"/>

<select id="ListaOpcoes" name="ListaOpcoes" hidden>
            <option>Selecione</option>
            <option value="opcao01">Opção 01</option>
            <option value="opcao02">Opção 02</option>
            <option value="opcao03">Opção 03</option>
            <option value="opcao04">Opção 04</option>
 </select>

php javascript html netbeans

  • Guy first, and VERY important, will you really use Radio Buttons? If yes you won’t be able to use the name as an attribute, because in a "group of radios" where you mark one and clear the other all will have the same name! Then I suggest you use a data-set selector, here’s an example https://answall.com/questions/398049/alterar-c%C3%b4r-do-cen%C3%a1rio-com-bot%C3%a3o/399030#399030

1 answer

0

Good morning buddy, try this here:

<script>
var radio01 = document.getElementsByName("radio01");
var ListaOpcoes = document.getElementsByName("ListaOpcoes");
 
function FuncRadio01() {               
   if(radio01[0].checked) {
      ListaOpcoes.style.display = 'none';
   } else {
      ListaOpcoes.style.display = '';
   }
}
</script>

Browser other questions tagged php javascript html netbeans

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