javascript - drop.value drop.id 存在吗？

Question

我希望 image.src 显示 id，而不是每个 <option> 的值。 drop.id 存在吗？这可以做到吗？或者id被锁定在<select>中？当用户点击提交时，我需要传递表单中的值。

<script type="text/javascript"> 
function swapImage(){ 
      var image = document.getElementById("imageToSwap"); 
      var dropped = document.getElementById("changethisimage"); 
      image.src = "http://foo.com/images/"+dropped.value; 
}; 
</script> 
<img id="imageToSwap" src="http://foo.com/images/SHOP_Car Emblem.jpg" width="150" align=right> 
<select name="os0" id="changethisimage" onChange="swapImage()"> 
<option value="Light Blue" id="SHOP_Car Emblem_Cyan.jpg" selected>Light Blue 
<option value="Dark Blue" id="SHOP_Car Emblem_DkBlue.jpg">Dark Blue 
<option value="Canadian Red" id="SHOP_Car Emblem_Red.jpg">Canadian Red 
<option value="Irish Green" id="SHOP_Car Emblem_IrishGreen.jpg">Irish Green 
</select>

Answer 1

尝试

image.src = "url" + dropped.selectedOptions[0].id

但是浏览器支持可能很差。所以你可能想要这个

var selected = dropped.selectedIndex;
image.src= "url" + dropped.options[selected].id

请参阅Select界面了解更多详细信息。

作为旁注，我看到了你的做法

<select name="os0" id="changethisimage" onChange="swapImage()">

onChange="code"有点糟糕，真的很糟糕。它是一个内联事件处理程序。这意味着您的 HTML 中有一段 JavaScript 代码。这完全违背了关注点分离并导致意大利面条式代码 hell 。

你应该将其完全替换为

document.getElementById("changethisimage").addEventListener("change", swapImage);