从select value属性更改图像源

Question

我正试图根据下拉菜单中的值更改图像源，但由于某种原因，我使用的代码似乎不起作用。

html

<select id="strapOptions">
<option value="black">Black Strap</option>
<option value="white">White Strap</option>
</select>
<button type="button" onclick="chooseStrapColour()">Apply Strap</button> 

Javascript

function chooseStrapColour() {
var black = "images/straps/oxford-black.png"
var white = "images/straps/oxford-white.png"
var colourRange = document.getElementById("strapOptions").value;
document.getElementById("oxStrap").src = colourRange;
}

如果我将第5行末尾的src=更改为"black"或"white"，那么它确实会更改图像源url，所以我怀疑是第4行中的某个东西破坏了它。

Answer 1

获得colourRange后，其值仅为"black"或"white"，您需要使用它来进一步决定要放入src的字符串，而不是该值：

function chooseStrapColour() {
   var black = "images/straps/oxford-black.png"
   var white = "images/straps/oxford-white.png"
   var colourRange = document.getElementById("strapOptions").value;
   var src = (colourRange === "white") ? white : black;
   document.getElementById("oxStrap").src = src;
}

Answer 2

另一个选项是将颜色附加到图像src中，就像一样

function chooseStrapColour() {
var colourRange = document.getElementById("strapOptions").value;
document.getElementById("oxStrap").src = "images/straps/oxford-"+colourRange+".png";
}

<select id="strapOptions">
<option value="black">Black Strap</option>
<option value="white">White Strap</option>
</select>
<button type="button" onclick="chooseStrapColour()">Apply Strap</button> 
<img src='' id='oxStrap'/>