javascript - 選択オプションからHTML5データ値を取得するにはどうすればよいですか？

Question

jqueryを使用して選択オプションからhtml5データ属性を取得することは可能ですか？

<select id="change-image">
<option value="cool" data-image="myimage.jpg">Cool</option>
</select>

$("#pet-tag-id").change(function() {                    
var src = $("#change-image").data("image");
$("#image-preview").attr("src", src);
});

<img id="image-preview">

Answer 1

はい。

あなたも正しい方法でそれをしました。jQueryは、HTML5データ属性を要素の内部expandoデータオブジェクトにプルします。そのため、名前だけでアクセスできます。

.data()間違っているのは、正しい要素を呼び出さないことだけです。で呼び出して<select>いますが、選択したオプション要素を取得する必要があります。好き

var src = $("#change-image option:selected").data("image");

Answer 2

$("#change-image").change(function() {                    
    var data_image = $(this).children('option:selected').attr('data-image');
});

</ p>