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

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>

没有显示图像。 有人知道怎么了吗？

PS：如果有非JavaScript解决方案，那会更好，但我认为没有。

Answer 1

var image = document.getElementById("itemImage");

var image是select，而不是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 个解决方案

解决方案1
1 已采纳 2016-10-09 10:54:20

解决方案2
0 2016-10-09 10:50:00

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-10-09 10:54:20

解决方案2 0 2016-10-09 10:50:00

解决方案1
1 已采纳 2016-10-09 10:54:20

解决方案2
0 2016-10-09 10:50:00