Question

I am trying to hide various div elements, but I want to make it dynamic so if I unselect then it shows back up in the browser. This is easy enough with show/hide, but my problem is that I need to show/hide some of the same fields. It works on the first selection, but then the second run it won't do anything because it thinks it should show it as per the '.show()' in the first run.

Can anyone point me in the right direction?

Thanks S.

<script>
$(document).ready(function(){
    $('#nat').on('change', function() {
      if ( this.value == 'no_nat')
      {
        $("#field25").hide();
        $("#field26").hide();
      }
      else
            {
        $("#field25").show();
        $("#field26").show();
      }
    });
});
</script>

<script>
$(document).ready(function(){
    $('#nat2').on('change', function() {
      if ( this.value == 'no_nat')
      {
        $("#field25").hide();
        $("#field26").hide();
      }
      else
            {
        $("#field25").show();
        $("#field26").show();
      }
    });
});
</script>

HTML like this:

<div class="form-row">
   <label>
      <span>Test1</span>
      <select name="field1" id="nat">
         <option value="" selected="selected"></option>
         <option VALUE="no_nat">1</option>
         <option VALUE="nat">2</option>
      </select>
   </label>
</div>
<div class="form-row">
   <label>
      <span>Test2</span>
      <select name="field2" id="nat2">
         <option value="" selected="selected"></option>
         <option VALUE="no_nat">1</option>
         <option VALUE="nat">2</option>
      </select>
   </label>
</div>
<div class="form-row" id='field25'>
   <label>
   <span>Test3</span>
   <input name="field25" type="text">
   </input>
   </label>
</div>
<div class="form-row" id='field26'>
   <label>
   <span>Test4</span>
   <input name="field26" type="text">
   </input>
   </label>
</div>

Answer 1

You don't need to define $(document).ready twice. Try this:

<script>
$(document).ready(function(){
    $('#nat').on('change', function() {
      if ( this.value == 'no_nat')
      {
        $("#field25").hide();
        $("#field26").hide();
      }
      else
            {
        $("#field25").show();
        $("#field26").show();
      }
    });

    $('#nat2').on('change', function() {
      if ( this.value == 'no_nat')
      {
        $("#field25").hide();
        $("#field26").hide();
      }
      else
            {
        $("#field25").show();
        $("#field26").show();
      }
    });
});
</script>

See fiddle https://jsfiddle.net/r2m9s8gx/

Answer 2

尝试

$(this).val() === 'no_nat'

或

$('#nat').val() === 'no_nat'

Answer 3

你可以尝试使用像

这样的单一处理程序

$(document).ready(function() {
  $('select[name="field1"], select[name="field2"]').on('change', function() {
    var state = $('select[name="field1"]').val() == 'no_nat' || $('select[name="field2"]').val() == 'no_nat';
    $("#field25, #field26").toggle(state);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
  <label>
    <span>Test1</span>
    <select name="field1">
      <option value="" selected="selected"></option>
      <option VALUE="no_nat">1</option>
      <option VALUE="nat">2</option>
    </select>
  </label>
</div>
<div class="form-row">
  <label>
    <span>Test2</span>
    <select name="field2" type="text">
      <option value="" selected="selected"></option>
      <option VALUE="no_nat">1</option>
      <option VALUE="nat">2</option>
    </select>
  </label>
</div>
<div class="form-row" id='field25'>
  <label>
    <span>Test3</span>
    <input name="field25" type="text" />
  </label>
</div>
<div class="form-row" id='field26'>
  <label>
    <span>Test4</span>
    <input name="field26" type="text" />
  </label>
</div>

Hide/show the same div

3 个答案: