Подмена изображений при выборе выпадающего действия

Question

На самом деле у меня есть выпадающий список. При выборе каждого варианта мне нужно загрузить изображение (скажем, в Div). Как мне сделать это JQuery.

Я попробовал кое-что здесь:

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

Мои два других изображения здесь:

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

ОБНОВЛЕНИЕ 1:

У меня такой вопрос.

jQuery добавить изображение внутри тега div

ОБНОВЛЕНИЕ 2

@ JellyBelly: Без обид, пока что это хороший ответ, но у него довольно много ошибок: сначала после выбора какого-либо изображения в раскрывающемся списке, а затем, если вы вернетесь к первому выбору со значением = "", Это показывает некоторое несуществующее изображение (фактически это не существует.) (Снимок экрана Atached ) 2: Если вы были на странице и выбрали, скажем, 2-е изображение, а затем, если вы обновляете, изображение не сбрасывается, а скорее показывает, что изображение для первого варианта select.the сценариев вылетает, ничего не загружается. Я думаю, это потому, что мы просто делаем это на DOM.

СПАСИБО

Answer 1

Если изображение зависит от выбранного варианта, я бы выбрал следующий подход:

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

Вот рабочий jsFiddle .

Answer 2

попробуйте это: 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);
    });
});

---

Вы РЕДАКТИРУЕТЕ Вопрос, и я редактирую свой Ответ

Если я правильно понимаю, у вас есть начальное состояние и пустой div в первом выборе, вы хотите повесить картинку, а в последующих выборках вы хотите заменить изображение, верно?Если да, то как вы это делаете:

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

});

демо: http://jsfiddle.net/JellyBelly/T65Lx/23/

Answer 3

Довольно прямо: http://jsfiddle.net/T65Lx/4/

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

Или поменяйте местами изображение на основе выбранного элемента:

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

И если хотитечтобы получить фантазию, предварительно загрузите этих щенков за пределы документа:

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

Чтобы вставить изображение в ваш div:

$("#myDivId").append("<img src='whatever.gif'/>");