如何使用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');

<强>更新

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

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

更新2

在进一步研究中，我发现this page解释了为什么使用attr更为可取，并概述data行为不端的情况。

更新3

jsPerf表明attr比使用data更快（在我的测试中为80％）。我仍在尝试查找有关原因的规范文档，或者使用data优先使用attr。

Answer 3

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

Answer 4

这应该可以正常工作：

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