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>