javascript - 在选择下拉操作时交换 jquery 中的图像

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 add image inside of div tag

更新2

@JellyBelly:无意冒犯，事实上，到目前为止，这是一个很好的答案，但它有很多错误，首先在下拉列表中选择一些图像后，然后如果您返回到第一个选择 value=""，它显示了一些不存在的图像(实际上这不存在。)(附屏幕截图) 2:如果您在页面中并选择了第二个图像，然后如果您刷新，它不会重置图像，而是显示 select 的第一个选项的图像。脚本崩溃，它不会加载任何内容。我认为这是因为我们只是在 DOM 上做好准备。

谢谢

Answer 1

试试这个: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/