我想要达到的目标:
根据选择框的选择显示图像。但我不想采用属性 value=""，我想采用自定义属性 data-img=""。
这是我实际拥有的代码，但它不起作用:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
function showFormatImage() {
var image = document.getElementById("itemImage");
image.src = $('select[name=itemImage] option:selected').data('img');
return false;
}
document.getElementById("itemImage").onchange = showFormatImage;
</script>
</head>
<body>
<select id="itemImage" name="itemImage">
<option data-img="first.png">First</option>
<option data-img="second.png">Second</option>
<option data-img="third.png">Third</option>
</select><br>
<img id="itemImage" src="">
</body>
</html>
没有显示图像。有人知道出了什么问题吗？
P.S.:如果有非 Javascript 解决方案，那就更好了，但我认为不存在。
最佳答案
var image = document.getElementById("itemImage");
var image 是选择 - 而不是 img，而且 - itemImage 在执行时不存在，因此事件处理程序不存在已放置。
您应该将代码更改为:
<html>
<head>
<script>
window.onload = function() {
document.getElementById("itemImage").onchange = showFormatImage;
};
function showFormatImage() {
var image = document.getElementById("changeImage");
image.src = $('select[name=itemImage] option:selected').attr('data-img');
return false;
}
</script>
</head>
<body>
<select id="itemImage" name="itemImage">
<option data-img="first.png">First</option>
<option data-img="second.png">Second</option>
<option data-img="third.png">Third</option>
</select><br>
<img src="" id='changeImage'/>
</body>
</html>
jquery解决方案:
$(document).ready(function(){
$('#itemImage').change(function(){
var src = $(this).find('option:selected').attr('data-img');
$('img#changeImage').attr('src',src);
});
});
关于javascript - 根据具有自定义值属性的选择选项显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39942721/