Javascript dropped.value dropped.id是否存在？

我希望image.src显示id，而不是每个

的值。你的身份证存在吗？这能做到吗？或者id是否锁定在

中？当用户点击submit时，我需要在表单中传递值

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

函数swapImage（）{
var image=document.getElementById（“imageToSwap”）；
var drop=document.getElementById（“changethisimage”）；
image.src=”http://foo.com/images/“+价值；
}; 
浅蓝色
深蓝色
加拿大红
爱尔兰绿

试试看

image.src=“url”+已删除。已选择选项[0]。id

但是，浏览器支持可能不好。所以你可能想要这个

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

有关更多详细信息，请参见界面

顺便说一句，我知道你在做什么

onChange=“code”

位不好，非常不好。它是一个内嵌事件处理程序。这意味着您的HTML中有一段JavaScript代码。这完全违背了关注点的分离，并导致了意大利面条式的代码地狱

你应该把它完全换成

document.getElementById（“changethisimage”）.addEventListener（“change”，swapImage）
尝试以下操作：

JS:

HTML:
我会这样做：

HTML:

现场演示：

然而，
dataset
并没有在IE中实现。如果你需要对IE的支持，请考虑一个跨浏览器库。
尝试关闭你的<代码> <代码>标签……你也不应该在你的ID值中有空格。谷歌对于HTML数据属性来说，比把URL作为IDONT不使用<代码> ID>代码>属性来存储这些值更为可取。如果不想使用
值
属性（为什么不？），可以定义自定义数据属性，如
数据src
。例如：
浅蓝色
.true。。但是你应该把它修好@雷诺斯，你没有因为。。。。？出于同样的原因，我可以dv，但我没有，因为你的答案是完全可行的。^ ^ ^ ^为什么
一旦改变
“很糟糕，真的很糟糕”
？@Neal很好，我解释了所有关注点的分离。@Raynos我同意，但是，如果OP不要求优化，那么它可能就不相关了Raynos@david如果有人使用坏代码，我会告诉他们它的坏代码。也许有一天我得维护它！
function swapImage(selectObj){ 
      var image = document.getElementById("imageToSwap");
      var options = selectObj.options;
      var sIndex = selectObj.selectedIndex; 
      image.src = "http://foo.com/images/"+options[sIndex].id; 
}; 

<select id="select_kitten">
    <option value="Kitten 1" data-src="210/200/" selected>Kitten 1</option>
    <option value="Kitten 2" data-src="220/210/">Kitten 2</option>
    <option value="Kitten 3" data-src="200/180/">Kitten 3</option>
    <option value="Kitten 4" data-src="225/220/">Kitten 4</option>
</select>

<img id="kitten_img">

var img = document.getElementById( 'kitten_img' ),
    select = document.getElementById( 'select_kitten' );

function onchange() {
    img.style.opacity = 0.2;
    img.src = 'http://placekitten.com/' + select.options[ select.selectedIndex ].dataset.src;
}

img.onload = function () {
    this.style.opacity = 1;
};

select.onchange = onchange;
onchange();