javascript - 如何使用javascript通过选项更改来交换图像？

Question

我需要制作 javascript 代码以通过选项更改来交换图像。这是代码:

<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"> 

我的问题是:我需要纯文本形式的选项值，例如“黑色/黄色/红色”，而不是 URL，因为此选项值将显示在结帐页面中。谁能帮帮我？

Answer 1

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

<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">