如何从选择选项中获取HTML5数据值？

Question

是否可以使用jquery从select选项中获取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');
});