javascript - jQuery selectmenu の後にデータ属性をキャッチする

Question

jQuery UI 選択メニューを適用した後、データ属性をキャッチできません。

どうすればデータを取得できますか?

HTML:

<select class="drpmnu">

         <option data-timings="something1">(01)</option>

         <option data-timings="something2">(02)</option>

</select>

JavaScript:

 $(".drpmnu").selectmenu({
    change: function( event, ui ){
        console.log($(this).data('timings'));
    }
});

http://jsbin.com/hicura/1/edit?html,コンソール,出力

Answer 1

thisその中のオブジェクトではなく、selectmenu自体を参照します。そのために使用する必要がありますui.item：

$(".drpmnu").selectmenu({
    change: function( event, ui ){
        console.log($(ui.item.element).data('timings'));
    }
});