JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<body>
<select id='ddlPessoa'>
<option value="0">N/A</option>
<option value="1">CNPJ</option>
<option value="2">CPF</option>
</select>
<div style='display:none;' id='divCpf'>CPF<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value size='20' placeholder="CPF" />
    <br/>
</div>
    <div style='display:none;' id='divCnpj'>CNPJ<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='business' value size='20' placeholder="CNPJ"/>
    <br/>
</div>
</body>

JavaScript

$(document).ready(function(){
    //Chama o evento após selecionar um valor
    $('#ddlPessoa').on('change', function() {
        //Verifica se o valor é igual a 1 e mostra a divCnpj
      if ( this.value == '1')
      {
            $("#divCpf").hide();
        $("#divCnpj").show();
      }
        //Se o tempo for mé igual a 2 mostra a divCpf
      else if( this.value == '2')
      {
          $("#divCnpj").hide();
        $("#divCpf").show();
      }
        //Se não for nem 1 nem 2 esconde as duas
        else{
             $("#divCnpj").hide();
              $("#divCpf").hide();
        }
    });
});