CODEWITHSUNDEEP
jquerycss
jack
jack

Reputation: 183

display an image when dropdown is selected

I am trying to display an image when a dropdown is selected with the code below.By default dropdown value will be "None".Initially when the page is loaded it is not displaying image.when i select field2 or field image is diaplaying.But when i select none again the image is still diaplaying.The code i used is:

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

Upvotes: 0

Views: 3566

Answers (1)

PeterKA
PeterKA

Reputation: 24648

This should do it. Use the .indexOf() on an array of the good values and check if the value is in the array. To ensure that the handler fires at page load trigger the change event with .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>

Update

Note: For the purpose of continuity, it is good practice to retain the original question and include any new updates. When the question is drastically different, it's advisable to create a new question.

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

Upvotes: 1

Related Questions