2

Actually I have a select dropdown. On the select of every option, I need to load an image(Say in a Div). How do I accomplish this is jquery.

I tried something here:

http://jsfiddle.net/refhat/T65Lx/2/

My other two images are here:

http://www.google.com/doodle4google/2010/images/doodle-holiday.gif http://www.google.com/doodle4google/2010/images/doodle-popeye.gif

UPDATE 1:

My question is something like this.

jQuery add image inside of div tag

UPDATE 2

@JellyBelly: No offence, In deed this is a good answer so far, But It has quite a few bugs, First after selecting some image in the dropdown and then if you go back to first select with value="", It shows some non existing image(Actually this doesn't exist.) (Screen Shot AtachedBUG 1) 2: If you were in the page and had selected say 2nd Image and then if you refresh, It doesn't reset the image, rather shows that Image for first option of select.the scripts crashes, It doesn't load anything. I think this is because we are just doing this on DOM ready.

THANKS

Community
  • 1
  • 1
Mike
  • 3,348
  • 11
  • 45
  • 80
  • so what do you think of my answer? http://stackoverflow.com/questions/7663857/swaping-images-injquery-on-select-dropdown-action/7664098#7664098 – JellyBelly Oct 06 '11 at 09:12

3 Answers3

2

try this: http://jsfiddle.net/JellyBelly/T65Lx/10/

HTML

<select id="sel">
    <option value="">Please Select the Logo</option>
    <option value="http://www.google.com/doodle4google/2010/images/doodle-sesame.gif">Logo 1</option>
    <option value="http://www.google.com/doodle4google/2010/images/doodle-holiday.gif">Logo 2</option>
    <option value="http://www.google.com/doodle4google/2010/images/doodle-popeye.gif">Logo 3</option>
</select>
<div style="height:200px; width:250px;border:1px solid red;"><img id="swapImg" src="http://www.google.com/doodle4google/2010/images/doodle-sesame.gif"></div>

JS

$(document).ready(function() {
    $("#sel").change(function() {
        var imgUrl = $(this).val();
        $("#swapImg").attr("src", imgUrl);
    });
});

You EDIT Question and I edit my Answer

If I understand correctly, you have the initial state and an empty div in the first selection you want to hang a picture and subsequent selections you want to replace the image right? If so 'it was, here's how you do:

HTML:

<select id="sel">
    <option value="">Please Select the Logo</option>
    <option value="http://www.google.com/doodle4google/2010/images/doodle-holiday.gif">Logo 1</option>
    <option value="http://www.google.com/doodle4google/2010/images/doodle-popeye.gif">Logo 2</option>
</select>
<div id="swap" style="height:200px; width:250px;border:1px solid red;">
    <input type="hidden" id="state" name="state" value="noImage"/>
</div>

JS

$(document).ready(function() {

    $("#sel").live("change", function() {
        if ($("#state").val() == "noImage") {    
            $("#swap").append(
                "<img id='swapImg' src='" + $(this).val() + "'>"
            );
            $("#state").val('image')
        } else {
           $("#swapImg").attr("src", $(this).val());
        }
    });

});

demo: http://jsfiddle.net/JellyBelly/T65Lx/23/

JellyBelly
  • 2,451
  • 2
  • 21
  • 41
  • Never just post a link to jsFiddle - your answer will be worthless if jsFiddle goes down. Also, the code that you provided in your sample is almost exactly what I posted 10 minutes ago. – James Hill Oct 05 '11 at 15:52
  • @JellyBelly: I updated my code here: jsfiddle.net/T65Lx/14 but it just appends the image, It needs to swap or replace the current Image – Mike Oct 07 '11 at 13:45
  • but you want to hang or replace the image in the div? Sorry but I have yet to understand what you want! – JellyBelly Oct 07 '11 at 14:55
  • @JellyBelly: So there is no way to load an Image into a div without having an Image tag inside or a hidden filed. And is this script scalable, Can I have more than 50 Images as my dropdown is constantly increasing. Thanks And Yes I just to swap the Images on every option select in Select DropDown – Mike Oct 07 '11 at 18:25
  • And yes when I select the option with value="", I mean first option. I see some broken image gets loaded in div. – Mike Oct 07 '11 at 19:22
1

If the image is dependant on the option that's selected, I would take the following approach:

HTML: 

<select id="sel">
    <option value="">Please Select the Logo</option>
    <option value="http://www.google.com/doodle4google/2010/images/doodle-holiday.gif">Logo 1</option>
    <option value="http://www.google.com/doodle4google/2010/images/doodle-popeye.gif">Logo 2</option>
    ...
</select>

<div style="height:200px; width:250px;border:1px solid red;">
    <img id="myImage" src="http://www.google.com/doodle4google/2010/images/doodle-sesame.gif">
</div>

JavaScript:

//Bind to change event of select and update image based on option value.
$("#sel").change(function() {
    $("#myImage").attr("src", $(this).val());
});

Here's a working jsFiddle.

James Hill
  • 60,353
  • 20
  • 145
  • 161
0

Pretty straight forward: http://jsfiddle.net/T65Lx/4/

$(document).ready(function() {
   $("#sel").change(function() {
       $("#swap").attr("src", "http://www.google.com/doodle4google/2010/images/doodle-holiday.gif");
   });
});

Or do swap the image out based on the item selected:

http://jsfiddle.net/T65Lx/5/

And if you want to get fancy, preload those puppies outside your document ready:

 (function(){
    var preLoadImg1 = new Image();
    preLoadImg1.src = "http://www.google.com/doodle4google/2010/images/doodle-holiday.gif";

    var preLoadImg2 = new Image();
    preLoadImg2.src = "http://www.google.com/doodle4google/2010/images/doodle-popeye.gif";
})();

To insert an image into your div:

$("#myDivId").append("<img src='whatever.gif'/>");
Kris Krause
  • 7,304
  • 2
  • 23
  • 26