javascript - selectのオプション要素のデータ属性を返す方法は？

Question

選択ボックスの各オプションに添付したデータ属性をログアウトしようとしていますが、成功しません。.on（'change' ...を使用して正しいですか、またはこれを実現するにはどうすればよいですか？

JS

$('select').children().on('change', function(e){
    console.log( $(this).data('id') );
    e.preventDefault();
});

HTML

<select>
<option value="1" data-id="option1">wgwg</option>
<option value="1" data-id="option2">wgwerg</option>
<option value="1" data-id="option3">wgwg</option>
<option value="1" data-id="option4">wgr</option>
</select>​

Answer 1

の変更イベントは変更されoptionていないため、実際には意味がありoptionません。イベントはにあるはずselectです。

$('select').on('change', function(e){ 
    console.log( $(this).find("option:selected").data('id') ); 
    e.preventDefault(); 
}); 

Answer 2

これを試して、

ライブデモ

$('select').on('change', function(e){
    console.log( $('option:selected', this).data('id'));
    e.preventDefault();
});

Answer 3

あなたはバニラジャバスクリプトでそれをすることができます：

console.log(this.querySelector(':checked').getAttribute('data-id'))

Answer 4

間違っているselectの子にイベントを割り当てているようです。selectにイベントを直接割り当てる必要があります。

またthis 、データ属性はありません。それはoption that is selected..だからあなたのコードをこれに変更してください

これを試して

 $('select').on('change', function(e){
        console.log( $(this).find('option:selected').attr('data-id') );
    }).change();

また

$('select').on('change', function(e){
            console.log( $(this).find('option:selected').data('id') );
        }).change();