Question

我尝试使用下面的代码选择下拉列表时显示图像。默认下拉值为“无”。最初加载页面时，它不显示图像。当我选择field2或field image时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 { padding-left:554px; position:absolute; padding-top: 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();
});

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

<强>更新

注意：出于连续性的目的，最好保留原始问题并包含任何新更新。当问题完全不同时，建议创建一个新问题。

＆＃13;

$(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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

选择下拉列表时显示图像

1 个答案: