Question

我试图在我的选择框中注销我附加到每个选项的数据属性但没有成功，我是否正确使用.on（'更改'...或者我应该做些什么来实现这一目标？

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

试试这个，

<强> Live Demo

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

Answer 3

您似乎将事件分配给选择的子项是错误的.. 您需要直接将事件分配给选择..

this也没有数据属性。它是option that is selected ..所以将代码更改为此

试试这个

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

OR

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

Answer 4

你可以使用 Vanilla Javascript ：

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

如何在select中返回option元素的data属性？

4 个答案: