Publicado em 25 de out.

Como exibir/ocultar campos de acordo com seleção?

Segue o código:

<select id="tipo_pessoa" onchange="exibir_ocultar(this)">
 <option value="pessoa_fisica">PF</option>
 <option value="pesso_juridica">PJ</option>
</select>
<br /><br />
<div id="cnpj">CNPJ: <br /><input type="number"></div><br />
<div id="razao">Razão Social: <br /><input type="text"></div><br />
<div id="cpf">CPF: <br /><input type="number"></div><br />
<div id="nome">Nome: <br /><input type="text"></div>

<script>
function exibir_ocultar(val){
 var cpf = document.getElementById('cpf');
 var nome = document.getElementById('nome');
 var cnpj = document.getElementById('cnpj');
 var razao = document.getElementById('razao');

 if(val == 'pessoa_fisica'){}
 $(cnpj).hide();
 $(razao).hide();
 $(cpf).show();
 $(nome).show();
 }
 else{
 $(cnpj).show();
 $(razao).show();
 $(cpf).hide();
 $(nome).hide();
 }
};
</script>

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

sousatg· 26 de out.

Vê esse exemplo no jsFiddle.

https://jsfiddle.net/sousatg/4bwqshg1/1/

No meu exemplo estou a utilizar apenas jQuery. O que você está a tentar fazer com os selectores é muito confuso, porque não criar logo o selector no jQuery como eu fiz no meu exemplo?

O seu script também tem outra coisa de errado na seguinte linha:

if(val == 'pessoa_fisica'){}
O que está dentro da variavel val não é o valor da select box mas sim uma referência ao elemento no DOM. O que você devia ter feito era:

if(val.value == 'pessoa_fisica'){}

luccasrodrigo· 26 de out.

Obrigado sousatg!

Segue código corrigido:

<form id="myForm">
 <select id="tipo_pessoa">
 <option value="pessoa_fisica">PF</option>
 <option value="pesso_juridica">PJ</option>
 </select>

 <div id="cnpj">
 <br />CNPJ: <br />
 <input type="number">
 </div>
 <br />
 <div id="razao">Razão Social:
 <br />
 <input type="text">
 </div>
 <br />
 <div id="cpf">CPF:
 <br />
 <input type="number">
 </div>
 <br />
 <div id="nome">Nome:
 <br />
 <input type="text">
 </div>

</form>

$('#tipo_pessoa').on('change', function() {
 if ($(this).val() == 'pessoa_fisica') {
 $('#cnpj').hide();
 $('#razao').hide();
 $('#cpf').show();
 $('#nome').show();
 } else {
 $('#cnpj').show();
 $('#razao').show();
 $('#cpf').hide();
 $('#nome').hide();
 }
});