CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bitten Fleax
Bitten Fleax

Reputation: 272

How to display an image from a dropdown menu selection?

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

Upvotes: 0

Views: 6201

Answers (3)

mtl
mtl

Reputation: 7557

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.

Upvotes: 0

rram
rram

Reputation: 2024

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

Upvotes: 0

T J
T J

Reputation: 43156

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>

Upvotes: 1

Related Questions