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

Question

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

这是我的标记：

<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 解决方案。非常感谢任何建议！

Answer 1

根据您的 HTML 代码，我编写了脚本，因为选项文本和图像 div id 值相同，所以我基于此编写了脚本。请参阅并相应地更改代码。

在更改下拉列表时，我正在获取选项值，并且由于图像父 div 的值是相同的 id，我正在获取该元素并更改其 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 link https://jsfiddle.net/90sybgyw/1/

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

How to display different images with jQuery when an option is selected

javascript

jquery

visibility