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

而不是

$('txt_ccode')

你可能要么：

$('#txt_ccode')

或

$('.txt_ccode')

取决于您将元素的id和/或class属性设置为。

此外，您可以重新编写代码以使其更简洁：

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

Answer 2

您应该说明它无法正常工作的原因。使用Firebug等调试器可以获得哪些错误消息。也许document.ready，或者更改函数永远不会运行。或者价值不是你所期望的。

此外，由于您使用jQuery是完全使用它的最佳实践。因此，而不是document.getElementById，我使用$('#txt_postcode')。

Answer 3

现在您正在使用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 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()
      }
   })
});

在选择更改上隐藏表单元素

4 个答案: