Mostrando e Ocultando div com javascript

[JuanHBiscaia]

Opa... então, imagine que você tem um select (lista suspensa com várias opções) em seu layout, e você quer que o conteudo de uma div seja mostrado somente se uma opção especifica for selecionada... como fazer isso ?

Mostrando e Ocultando conteúdo de uma div

Primeiramente, o código JS:

<script language="JavaScript" type="text/javascript">

function ShowHideDIV(NomeDIV, Valor){

  Valor = document.getElementById("Lista").value;

  if (Valor=="1") 
  {
    document.getElementById(NomeDIV).style.display = "block";
  }
  else
  {
    document.getElementById(NomeDIV).style.display = "none";
   }
}
</script>

explicando:

Valor = document.getElementById("Lista").value;

aqui guardamos na variável "Valor" o value que a lista "Lista" vai receber quando algum item for selecionado

if (Valor=="1") { document.getElementById(NomeDIV).style.display = "block"; }

se a variavel "Valor" for igual ou receber "1" (o value equivalente á primeira opção da nossa lista) então mostre o elemento definido (no caso nossa div)

else { document.getElementById(NomeDIV).style.display = "none"; }

senão, bloqueie a visualização dos elementos da div e agora o código html:

<form name="Teste">
Tipo: <select name="Lista" size="1" id="Lista" onChange="ShowHideDIV('CampoOculto','1');">
    <option value=""></option>
    <option value="1">Opção1</option>
    <option value="2">Opção2</option>
</select>
<br>
<br>
<div id="CampoOculto" style="display: none;">
        <label>nome:</label><br>
        <input type="text" id="nome"><br>
        <br>
        <label>email:</label><br>
        <input type="text" id="email"><br>
</div>
</form>