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:如果您在页面中并选择了第二张图片，然后如果您刷新，它不会重置图片，而是显示图片作为选择的第一个选项。脚本崩溃，它不会加载任何东西。我认为这是因为我们只是在 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/