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链接https://jsfiddle.net/90sybgyw/1/

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

1 个答案: