Question

其实我有一个选择下拉菜单。在选择每个选项时，我需要加载一个图像（在Div中说）。我如何做到这一点就是jquery。

我在这里试了一下：

我的另外两张图片在这里：

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：没有冒犯，到目前为止，这是一个很好的答案，但它有相当多的错误，首先在下拉列表中选择一些图像，然后如果你回到第一个选择值=“”，它显示了一些不存在的图像（实际上这不存在。）（屏幕截图已到达 BUG 1

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

这是a working 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'/>");

在选择下拉选项中交换jquery中的图像

3 个答案:

您正在编辑问题而我编辑了我的答案