选择选项时如何使用jQuery显示不同的图像答案

【问题标题】：How to display different images with jQuery when an option is selected选择选项时如何使用jQuery显示不同的图像
【发布时间】：2016-06-23 16:48:16
【问题描述】：

选择一个选项时如何显示不同的图像？

这是我的标记：

<select name="brand-range">
    <option value="Brand1">BFS</option>
    <option value="Brand2">FS</option>
    <option value="Brand3">PS</option>
</select>

<div class="option-image" id="thumbs">
    <div id="bfs"><img src="images/hotel0.jpg"/></div>
    <div id="fs"><img src="images/hotel1.jpg" /></div>
    <div id="ps"><img src="images/hotel2.jpg" /></div>                                                             
</div>

我正在寻找一个 jQuery 解决方案。任何建议都非常感谢！

【问题讨论】：

请将您自己编写的JS代码添加到问题中。
你已经尝试过什么代码？请edit问题在问题中包含您的源代码。请参阅What topics can I ask about here?、How do I ask a good question? 和 How to create a Minimal, Complete, and Verifiable Example。现在你的问题相当于：“请给我 jQuery 中的 codz。”

标签： javascript jquery visibility

【解决方案1】：

根据您的 HTML 代码，我编写了脚本，因为选项文本和图像 div id 值相同，我基于此编写了脚本。参考和代码做相应的变化。

在更改下拉列表时，我正在获取选项值，并且由于图像父 div 的值是相同的，因此我正在获取该元素并更改其 css。注意：您必须更改您的 HTML 结构，以便您可以通过 jquery 进行相应的更改。

$("#brandrange").bind("change", function() {
  var image_element = ($("option:selected").text()).toLowerCase();
  $("#thumbs").find("div").css("display", "none");
  $("#thumbs").find("#" + image_element).css("display", "block");
});

这里是 JSfiddle 链接https://jsfiddle.net/90sybgyw/1/

【讨论】：