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

これをさらに調査したところ、使用が望ましい理由を説明し、誤動作のケースの概要を説明するこのページを見つけました。attrdata

アップデート3

jsPerfはattr、を使用するよりもはるかに高速（私のテストでは80％）であることを示していdataます。私はまだ、理由について、またはを使用するよりも使用するdata方が望ましいかどうかについて、正規のドキュメントを見つけようとしていますattr。

Answer 3

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

Answer 4

これは正常に機能するはずです。

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