jquery - 选择下拉菜单时显示图像

Question

当使用下面的代码选择下拉列表时，我试图显示图像。默认情况下，下拉值将为“无”。最初，当加载页面时，它不显示图像。当我选择 field2 或字段图像时diaplaying。但是当我再次选择 none 时，图像仍在 diaplaying。我使用的代码是:

<select id="dropdown" name="dropdown">
<option value="field1" selected="selected">None</option>
<option value="field2">field2</option>
<option value="field3">field3</option>
</select>


$(document).ready(function() {
  $("#image").hide();
  $('#dropdown').on('change', function() {
   if ( this.value == 'field2') 
   {
      $("#image").show();
   }
   elsif(this.value == 'field3')
   {
       $("#image1").show();
   }
  else
   {
      $("#image").hide();
      $("#image1").hide();
   }
 });

});

#image img {
左填充:554px；
position:absolute；
填充顶部:774px；
}

Answer 1

这应该可以做到。在良好值的数组上使用 .indexOf() 并检查该值是否在数组中。为确保处理程序在页面加载时触发，使用 .change() 触发 change 事件。:

$(document).ready(function() {        
    $('#dropdown').on('change', function() {
        if ( ['field2', 'field3'].indexOf( this.value ) > -1 )
        {
            $("#image").show();
        }
        else 
        {
            $("#image").hide();
        }
    })
    .change();
});

$(document).ready(function() {
  
  $('#dropdown').on('change', function() {
   if ( ['field2', 'field3'].indexOf( this.value ) > -1 )
   {
      $("#image").show();
   }
  else 
   {
      $("#image").hide();
   }
 })
  .change();
});

#image img {
    padding-left: 60px;
    position:absolute;
    padding-top: -10px; 
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown" name="dropdown">
<option value="field1" selected="selected">None</option>
<option value="field2">field2</option>
<option value="field3">field3</option>
</select>

<div id="image">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQijmYaWonPS_ckwz9WLIrMpDPWCQDOTe8D7O_RIjEVcyMKr7NwZQ" alt="some image" />
</div>

更新

注意:为了保持连续性，最好保留原始问题并包括任何新的更新。当问题截然不同时，建议创建一个新问题。

$(document).ready(function() {
  $('#dropdown').on('change', function() {
    $('#image,#image1').hide();
   if ( this.value === 'field2') 
   {
      $("#image").show();
   }
   else if(this.value === 'field3')
   {
       $("#image1").show();
   }
  else
   {
      $("#image").hide();
      $("#image1").hide();
   }
 })
  .change();
});

#imagex img {
    padding-left:554px;
    position:absolute;
    padding-top: 774px; 
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown" name="dropdown">
<option value="field1" selected="selected">None</option>
<option value="field2">field2</option>
<option value="field3">field3</option>
</select>
<span id="image">#image</span>
<span id="image1">#image1</span>