如何使用javascript交换图像与选项更改？ [英] How to use javascript to swap images with option change?

问题描述

我需要使用javascript代码来交换带有选项更改的图像。
以下是代码：

I need to make javascript code to swap images with option change. Here is the code:

<select name="Color:"onchange="document.getElementById('myimage').src = this.value;
">
<option value="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_byr.jpg">Black/Yelow/Red</option>

<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_nr.jpg">Navy/Red</option>
<option value="images/taylormade_purelite_standbag_nw.jpg">Red/Black/White</option>
<option value="images/taylormade_purelite_standbag_rb.jpg">Black/Red</option>
<option value="images/taylormade_purelite_standbag_wrb.jpg">White/Red/Black</option>
</select>

<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage"> 

我的问题是这样的：我需要在纯文本中有选项值，例如Black / Yelow /红色不是URL，因为此选项值将显示在结帐页面中。任何人都可以帮助我吗？

My problem is this: I need to have option values in plain text such as "Black/Yelow/Red" not a URL because this option value will show up in the check out page. Can anybody help me?

推荐答案

我认为，设置从颜色选项到URL的映射可能有效。

Setting up a mapping from your color options to the URLs might work, I think.

<script>
var colorUrlMap = {
    "Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
    //Add more here
    "White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
<option value="Black/White">Black/White</option>
<!-- Add more here -->
<option value="White/Red/Black">White/Red/Black</option>
</select>


<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage"> 

这篇关于如何使用javascript交换图像与选项更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！