How to display an image from a dropdown menu selection?

Question

Here, I have the following code:

 $(document).ready(function() { $("select").change(function() { $("select option:selected").each(function() { if ($(this).attr("value") == "Oone") { $(".box").hide(); $(".red").show(); } if ($(this).attr("value") == "Otwo") { $(".box").hide(); $(".green").show(); } if ($(this).attr("value") == "Othree") { $(".box").hide(); $(".blue").show(); } }); }).change(); }); 

  .box { padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .red { background: #ff0000; } .green { background: #00ff00; } .blue { background: #0000ff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> <select> <option style="display: none;">Choose Color</option> <option value="Oone">Option 1</option> <option value="Otwo">Option 2</option> <option value="Othree">Option 3</option> </select> </div> <div class="red box">You have selected <strong>red option</strong> so i am here</div> <div class="green box">You have selected <strong>green option</strong> so i am here</div> <div class="blue box">You have selected <strong>blue option</strong> so i am here</div> 

(I got this from an external source) but what happens is when someone selects Option 1, 2 or 3 it will create a red, green or blue box with some text in it. I was wondering how to implement images into this. So when someone selects Option 1 an image will appear and when they select Option 2 (the other image will hide) and a different image will appear.

I have been trying to get it to work by adding an image by creating a new class under css and when someone selects option 1 it will make it appear however, that did not work. - Thanks

Answer 1

Simply add the images you want to display inside the respective <div> :

 $(document).ready(function() { $("select").change(function() { $("select option:selected").each(function() { if ($(this).attr("value") == "Oone") { $(".box").hide(); $(".red").show(); } if ($(this).attr("value") == "Otwo") { $(".box").hide(); $(".green").show(); } if ($(this).attr("value") == "Othree") { $(".box").hide(); $(".blue").show(); } }); }).change(); }); 

 .box { padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .box img { float: right; width: 150px; height: 100px; } .red { background: #ff0000; } .green { background: #00ff00; } .blue { background: #0000ff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> <select> <option style="display: none;">Choose Color</option> <option value="Oone">Option 1</option> <option value="Otwo">Option 2</option> <option value="Othree">Option 3</option> </select> </div> <div class="red box">You have selected <strong>red option</strong> so i am here <img src="http://i46.tinypic.com/2epim8j.jpg" /> </div> <div class="green box">You have selected <strong>green option</strong> so i am here <img src="http://i49.tinypic.com/28vepvr.jpg" /> </div> <div class="blue box">You have selected <strong>blue option</strong> so i am here <img src="http://i50.tinypic.com/f0ud01.jpg" /> </div> 

Answer 2

Just have different images in different class, based on the selection you can show the class.

.red {
  background-image:"img1.png";
}
.green {
  background-image:"img2.png";
}
.blue {
  background-image:"img3.png";
}

NOw the script will be as you expected

 $("select").change(function() {
    $("select option:selected").each(function() {
      if ($(this).attr("value") == "Oone") {
        $(".box").hide();
        $(".red").show();
      }
      if ($(this).attr("value") == "Otwo") {
        $(".box").hide();
        $(".green").show();
      }
      if ($(this).attr("value") == "Othree") {
        $(".box").hide();
        $(".blue").show();
      }
    });

Answer 3

You can put images in your boxes the normal way, using the img element. They will be hidden as long as the .box is hidden. You could also simplify your js code a bit, if you changed the value property of your options to the corresponding css class of your .box 's:

<div>
  <select>
    <option style="display: none;">Choose Color</option>
    <option value="red">Option 1</option>
    <option value="green">Option 2</option>
    <option value="blue">Option 3</option>
  </select>
</div>
<div class="red box">
    You have selected <strong>red option</strong> so i am here
    <img src="http://placehold.it/150x150" />
</div>
<div class="green box">
    You have selected <strong>green option</strong> so i am here
    <img src="http://placehold.it/150x150" />
</div>
<div class="blue box">
    You have selected <strong>blue option</strong> so i am here
    <img src="http://placehold.it/150x150" />
</div>

Here is the js:

$("select").change(function() {
  $('.box').hide();
  $('.' + $(':selected', this).attr('value')).show();
});

Here is a jsfiddle .