如何使用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"> 

我的问题是:我需要在纯文本中使用选项值,例如"Black/Yelow/Red"而不是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">