カスタム値属性の選択オプションに応じて画像を表示

選択ボックスの選択に応じて画像を表示します。しかし、私は属性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 .:もしもJavascript以外のソリューションがあれば、それはさらに良いだろうが、私はそこにいるとは思わない。

出典

2016-10-09 David

しかし、あなたはjqueryのを統合していますか？あなたのコードは非常にきれいではありませんが、動作します：https://jsfiddle.net/7w1p95yw/ – Baro

ああ、そうです。私はjQueryを忘れてしまった。しかし、それはまだ動作していません。 – David

jqueryで他の答えを確認してください... – Baro

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

var imageと.dataの機能を置き換える必要があります選択である - また、ないimg - itemImageは、イベントハンドラのISN」ので、実行時には存在しません。配置される。

あなたがあなたのコードを変更する必要があります

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

出典

2016-10-09 10:54:20

どちらの作品もありません。最初のコードブロックは機能しますか？ – David

あなたは何が問題なのかを知っている - タイミング - あなたはHTMLの前にあるので、 'itemImage' selectは存在しません（コンソールのmanを介してデバッグします）。私の答えを更新しています –

はい、あなたは右。今すぐ動作します。 – David

は.ATTR（データ-IMG）

出典

2016-10-09 10:50:00

カスタム値属性の選択オプションに応じて画像を表示

答えて

関連する問題