从 select 值属性更改图像源

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

从 select 值属性更改图像源

Changing an image source from a select value property

javascript

html-select

从 select 值 属性 更改图像源

Changing an image source from a select value property

javascript

html-select

从 select 值属性更改图像源