Właściwie mam listę wyboru. W wybraniu każdej opcji muszę załadować obraz (powiedzmy w div). Jak to osiągnąć jest jQuery.

Próbowałem czegoś tutaj:

http://jsfiddle.net/refat/t65lx/2/

Moje pozostałe dwa obrazy są tutaj:

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

AKTUALIZACJA 1:

Moje pytanie to coś takiego.

jQuery dodaje obraz wewnątrz znacznika DIV

UPDATE 2

@Jellybelly: Brak przestępstwa, w czynie jest to dobra odpowiedź do tej pory, ale ma całkiem kilka błędów, najpierw po wybraniu pewnego obrazu w rozwijanej rozwijanej Nie istniejący obraz (w rzeczywistości nie istnieje.) (Withed Shot Atached Bug 1) 2: Jeśli byłeś na stronie i wybrałeś 2nd Image, a następnie, jeśli odświeżasz, nie resetuje obrazu, a raczej pokazuje ten obraz, aby uzyskać pierwszą opcję SELECT.The Crashs, nie ładuje się niczego. Myślę, że to dlatego, że robimy to w domu gotowy.

DZIĘKI

2
Mike 5 październik 2011, 19:34

3 odpowiedzi

Najlepsza odpowiedź

Spróbuj tego: 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);
    });
});

Edycja pytania i edytujesz moją odpowiedź

Jeśli rozumiem poprawnie, masz stan początkowy i pusty div w pierwszym wyborze, który chcesz zawiesić zdjęcie, a kolejne wybory, które chcesz wymienić w prawo? Jeśli tak, to było, oto jak się masz:

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/

2
JellyBelly 7 październik 2011, 15:15

Jeśli obraz zależy od wybranej opcji, podjąłbym następujące podejście:

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

Oto Działający jsfiddle.

1
James Hill 5 październik 2011, 15:41

Dość proste: http://jsfiddle.net/t65lx/4/

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

Lub zamień obraz na podstawie wybranego elementu:

http://jsfiddle.net/t65lx/5/

A jeśli chcesz uzyskać fantazję, załaduj te szczenięta poza dokumentem gotowy:

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

Aby wstawić obraz do swojego div:

$("#myDivId").append("<img src='whatever.gif'/>"); 
0
Kris Krause 5 październik 2011, 19:40