jQueryの変更イベントがRails Appで動作しません

Question

jQueryのchangeイベントが自分のレールアプリケーションで動作していません。私はselectを持っています。私は選択した値に応じて入力を隠すか表示したいと思っています。だから私は入力があります。

<div class="form-group"> 
    <%= f.label :tipopessoa, "Tipo de Pessoa:", class: "col-sm-2 control-label" %> 
    <div class="col-sm-6"> 
     <%= f.select :tipopessoa, ['Jurídica', 'Física'], class: "form-control" %> 
    </div> 
    </div> 
    <div class="form-group juridica"> 
    <%= f.label :cnpj, "CNPJ:", class: "col-sm-2 control-label" %> 
    <div class="col-sm-6"> 
    <%= f.text_field :cnpj, class: "form-control" %> 
    </div> 
    </div> 
    <div class="form-group fisica"> 
    <%= f.label :cpf, "CPF:", class: "col-sm-2 control-label " %> 
    <div class="col-sm-6"> 
     <%= f.text_field :cpf, class: "form-control" %> 
    </div> 
    </div> 
    <div class="form-group juridica"> 
    <%= f.label :razaosocial, "Razão Social:",class: "col-sm-2 control-label" %> 
    <div class="col-sm-6"> 
    <%= f.text_field :razaosocial, class: "form-control" %> 
    </div> 
    </div> 

をとjQueryコードがあります。

<script> 
jQuery(function(){ 
    $(document).change(function(){ 
    if($('#cliente_pessoatipopessoa').val() == 'Jurídica') { 
       $(".juridica").show(); 
       $(".fisica").hide(); 
      } else { 
       $(".fisica").show(); 
       $(".juridica").hide(); 
      } 
      }); 
}); 
</script> 

を私はFísicaに選択を変更するときに、クラスを持っているdiv要素「Juridicaは」消えたが、その他の変更もう働かないでください。
どうすればこの問題を解決できますか？

Answer 1

変更は、変更されたselectにバインドされる必要があります。

$('select').change(function() { // Bind to the select 
    if ($(this).val() == 'Jurídica') { // use $(this).val() to get the changed selects value 
    $(".juridica").show(); 
    $(".fisica").hide(); 
    } else { 
    $(".fisica").show(); 
    $(".juridica").hide(); 
    } 
}); 

JS Fiddle

そして、あなたは以下のようにして、あなたのコードを減らすことができます

$('select').change(function(){ 
    var isEqual = $(this).val() == 'Jurídica'; 
    $(".juridica").toggle(isEqual); // Show if equal/ hide if not 
    $(".fisica").toggle(!isEqual); // Hide if equal/ show if not 
}); 

JS Fiddle