選択変更時にフォーム要素を非表示にする

Question

こんにちは、特定のドロップダウン値が選択されていない限り、フォーム要素を非表示にしようとしています。これまでのところ私のコードはありますが、うまくいきません。

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('txt_ccode').change(function() { 
      if ($(this).val() == 'GB') { 
       document.getElementById('txt_postcode').style.display="block"; 
      } 
      else {document.getElementById('txt_postcode').style.display="none"; } 

    }); 
}); 
</script> 

すべてのヘルプは、それが働いてイマイチなぜあなたは指定する必要があり

Answer 1

今、あなたはjQueryの、内側のショーと非表示ロジックを使用していて、次のように簡略化されること：

<script type="text/javascript"> 

    $(document).ready(function() { 
     $('#txt_ccode').change(function() { 
      if ($(this).val() == 'GB') { 
       $('#txt_postcode').show(); 
      } else { 
       $('#txt_postcode').hide(); 
      } 
    }); 
}); 
</script> 

Answer 2

を高く評価しています。 Firebugなどのデバッガを使用して、どのようなエラーメッセージが表示されますか。たぶんdocument.ready、またはchange関数が実行されることはありません。あるいは、価値観はあなたが期待するものではありません。

また、完全に使用するためにjQueryのベストプラクティスを使用しているためです。したがって、document.getElementByIdの代わりに$('#txt_postcode')を使用します。

Answer 3

代わりの

$('txt_ccode') 

あなたはおそらくどちらかの希望：

$('#txt_ccode') 

または

$('.txt_ccode') 

をあなたがするあなたの要素のidおよび/またはクラス属性を設定した内容に応じて。

また、あなたはそれがもう少し簡潔にするようにコードを再記述することができます。

$('#txt_ccode').change(function() { 
    $('#txt_postcode').toggle($(this).val() === 'GB'); 
}); 

Answer 4

$(function() { 
    $('select').on('change', function(e) { 
     var val = $('select option:selected').val() // get the value from a dropdown select 
     if(val == 'GB') 
     { 
      $('element').show() 
     } 
     else 
     { 
      $('element').hide() 
     } 
    }) 
});