Question

我想达到的目标：

根据选择框选择显示图像。但我不想使用属性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解决方案，那就更好了，但我认为没有。

Answer 1

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

Answer 2

应该用.attr（data-img）替换.data函数

根据具有自定义值属性的选择选项显示图像

2 个答案: