javascript - 如何在选择中返回选项元素的数据属性？

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

更改事件 onoption并没有真正意义，因为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

你可以使用Vanilla Javascript：

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

Answer 4

您似乎将事件分配给 select 的孩子这是错误的..您需要将事件直接分配给 select ..

也this 没有data属性。它是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();