jQuery 在选择更改时，获取数据属性值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8345666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
On select change, get data attribute value
提问by userBG
The following code returns 'undefined'...
以下代码返回“未定义”...
$('select').change(function(){
alert($(this).data('id'));
});
<select>
<option data-id="1">one</option>
<option data-id="2">two</option>
<option data-id="3">three</option>
</select>
回答by Jordan Brown
You need to find the selected option:
您需要找到选定的选项：
$(this).find(':selected').data('id')
or
或者
$(this).find(':selected').attr('data-id')
although the first method is preferred.
虽然第一种方法是首选。
回答by Rich O'Kelly
Try the following:
请尝试以下操作：
$('select').change(function(){
alert($(this).children('option:selected').data('id'));
});
Your change subscriber subscribes to the change event of the select, so the thisparameter is the select element. You need to find the selected child to get the data-id from.
你的change订阅者订阅了select的change事件，所以this参数就是select元素。您需要找到选定的孩子以从中获取数据 ID。
回答by Sergey Kovalenko
document.querySelector('select').onchange = function(){
alert(this.selectedOptions[0].getAttribute('data-attr'));
};
回答by Arthur Araújo
Vanilla Javascript:
香草Javascript：
this.querySelector(':checked').getAttribute('data-id')
回答by mickmackusa
You can use contextsyntax with thisor $(this). This is the same effect as find().
您可以将context语法与this或一起使用$(this)。这与 效果相同find()。
$('select').change(function() {
console.log('Clicked option value => ' + $(this).val());
<!-- undefined console.log('$(this) without explicit :select => ' + $(this).data('id')); -->
<!-- error console.log('this without explicit :select => ' + this.data('id')); -->
console.log(':select & $(this) => ' + $(':selected', $(this)).data('id'));
console.log(':select & this => ' + $(':selected', this).data('id'));
console.log('option:select & this => ' + $('option:selected', this).data('id'));
console.log('$(this) & find => ' + $(this).find(':selected').data('id'));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option data-id="1">one</option>
<option data-id="2">two</option>
<option data-id="3">three</option>
</select>As a matter of microoptimization, you might opt for find(). If you are more of a code golfer, the context syntax is more brief. It comes down to coding style basically.
作为微优化的问题，您可能会选择find(). 如果您更像是一个代码高尔夫球手，那么上下文语法会更简短。基本上归结为编码风格。
Here is a relevant performance comparison.
这里有一个相关的性能比较。
回答by John Bryan Calleja
this works for me
这对我有用
<select class="form-control" id="foo">
<option value="first" data-id="1">first</option>
<option value="second" data-id="2">second</option>
</select>
and the script
和脚本
$('#foo').on("change",function(){
var dataid = $("#foo option:selected").attr('data-id');
alert(dataid)
});
回答by Sinan ?ALI?KAN
$('#foo option:selected').data('id');
