dropped.value does dropped.id exist?

dropped.value does dropped.id exist?

本文关键字：dropped exist does value id      更新时间：2023-09-26

我希望image.src显示id，而不是每个<option>的值。dropped.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>

尝试

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

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

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

详见选择界面。

顺便说一句，我看到你在做

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

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

你应该用完全取代它

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

试试这个：

JS:

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

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

我会这样做：

HTML:

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

JavaScript:

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();

现场演示：http://jsfiddle.net/XmhU9/4/

dataset并没有在IE中实现。如果您需要对IE的支持，请考虑使用跨浏览器库。

相关文章：