jQuery 在选择选项上加载图像答案

【问题标题】：jQuery Load image on select optionjQuery 在选择选项上加载图像
【发布时间】：2010-10-14 18:36:34
【问题描述】：

我正在尝试根据所选内容将不同的图像加载到 DIV 中，如下所示：

<select>
  <option value="mercedes">Car #1</option>
  <option value="ferrari">Car #2</option>
  <option value="fiat">Car #3</option>
</select>

如果选择了 Car #1 es 选项，请将 mercedes.jpg 加载到 <div id="car"></div>

有什么想法吗？？

非常感谢！！

【问题讨论】：

【解决方案1】：

您可以使用.change() 事件处理程序，如下所示：

$("select").change(function() {
  $("#car").html($("<img />", { src: $(this).val() + ".jpg" }));
});

当值改变时，这将创建一个新的<img>，将其源设置为NEWVALUE.jpg，并使用.html() 将#car 的内容设置为该元素.html(element) 是a shortcut for .empty().append(element)。

【讨论】：

尼克感谢您的快速帮助，但它似乎不起作用：-|
@Alberto - 你是在 document.ready 上运行这个吗？例如在$(function() { });...如果是这些元素是动态添加的吗？
尼克，如果我想要预选项目并为此元素加载图像，你知道该怎么做吗？
@Alberto - 最后一样，将}); 更改为}).change(); 以在加载时触发它，然后它将加载当前选择的图像，这就是你想要的吗？例如，您可以使用 <option value="pickOne">Please Select</option> 和 pickOne.jpg。
你的天才尼克！！非常感谢，唯一不起作用的是使用箭头键在列表中导航，但这并不是真正必要的。我真的需要学习更多的 Javascript/jQuery。