javascript - 如何使用 JQuery 获取选定选项的属性？

Question

<select id="hello">
    <option data-title="foo" value="1" selected="selected">Abcdefg</option
</select>

为了获得选择的价值，我通常这样做：

$("#hello").val(); // returns 1

但是如果我想获得数据标题怎么办？

Answer 1

尝试如下，

$('#hello option:selected').data('title');

Answer 2

尝试：

$('option:selected', '#hello').attr('data-title');

更新

虽然上述方法有效，但正如其他人所说，处理此问题的首选方法是使用数据 API。

$('option:selected', '#hello').data('title');

更新 2

在进一步研究这一点时，我发现这个页面解释了为什么使用attr更可取，并概述了data行为不端的情况。

更新 3

jsPerf证明这attr比使用data. 我仍在尝试找到有关原因的规范文档，或者 usingdata是否比 using 更可取attr。

Answer 3

这应该可以正常工作：

$('#hello :selected').data('title');

Answer 4

var title = $('#hello').find(':selected').data('title');