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

[luccasrodrigo 0]

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>

[sousatg 9]

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 0]

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();
  }
});