从选择值属性更改图像源

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 =更改为“黑色”或“白色”，那么它确实会更改图像源网址，因此我怀疑第4行中的某些内容已经破坏了它。

Answer 1

获得java.rmi.ServerException: RemoteException occurred in server thread; nested exception is: java.rmi.RemoteException: Exception starting the process; nested exception is: java.rmi.ServerException: RemoteException occurred in server thread; nested exception is: java.rmi.RemoteException: Initialization error; nested exception is: com.jacob.com.ComFailException: Can't co-create object 后，其值仅为colourRange或"black"，您需要使用它来进一步确定要放入src的字符串，而不是该值：

"white"

Answer 2

另一种选择就是将颜色附加到图像src中，就像这样

＆＃13;

＆＃13;

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

＆＃13;

<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'/>

＆＃13;

＆＃13;

＆＃13;