如何从选择选项中获取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");