Question

我有这段代码，但问题是当值为空（选项1）时会显示状态。如果值为空，如何隐藏它？

<select id="country"">
    <option value="" disabled="disabled" selected="selected">PLEASE CHOOSE</option>
    <option value="USA">USA</option>
    <option value="UK">UK</option>
    <option value="IT">ITALY</option>
</select>
<div id="states">
</div>

    $(document).ready(function(){
    $('#country').on('change', function() {
      if ( this.value == 'USA')
      {
        $("#states").show();
      }     
        else
      {
        $("#states").hide();
     }
    });
});

Answer 1

您可以在添加处理程序后触发更改事件。使用了命名空间事件处理程序，因为我们不希望任何其他处理程序被执行。

$(document).ready(function() {
  $('#country').on('change.states', function() {
    $("#states").toggle($(this).val() == 'USA');
  }).trigger('change.states');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="country">
  <option value="" disabled="disabled" selected="selected">PLEASE CHOOSE</option>
  <option value="USA">USA</option>
  <option value="UK">UK</option>
  <option value="IT">ITALY</option>
</select>
<div id="states">states</div>

Answer 2

只需触发更改：

$('#country').on('change', function() {
  if ( this.value == 'USA')
    $("#states").show();     
  else
    $("#states").hide();
}).trigger("change"); // notice this line

根据下拉菜单中的选择显示/隐藏表单字段

2 个答案: