根据自定义属性获取选项元素

Question

我有以下几点：

<select id="selector">
<option data-origin-table="foo1" data-origin-col="bar1">
<option data-origin-table="foo2" data-origin-col="bar2">
<option data-origin-table="foo3" data-origin-col="bar3">
...
</select>

我试图根据自定义属性选择一个option ，但没有成功。

我尝试了以下方法，但都失败了。

console.log($('#selector option').filter(function () { return $(this)[0].getAttribute('data-origin-table') == "foo2" && $(this)[0].getAttribute('data-origin-col')=="bar2"; }).val());

console.log($('#selector option').filter(function () { return $(this).getAttribute('data-origin-table') == "foo2" && $(this).getAttribute('data-origin-col')=="bar2"; }).val());

console.log($('#selector option').filter(function () { return $(this).attr('data-origin-table') == "foo2" && $(this).attr('data-origin-col')=="bar2"; }).val());

有关如何正确执行此操作的任何线索？

如果有帮助，请使用jquery 2.2.3 。 谢谢！

Answer 1

为此，您可以使用属性选择器：

 var val = $('#selector option[data-origin-table="foo2"][data-origin-col="bar2"]').val(); console.log(val); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="selector"> <option data-origin-table="foo1" data-origin-col="bar1" value="foo">A</option> <option data-origin-table="foo2" data-origin-col="bar2" value="bar">B</option> <option data-origin-table="foo3" data-origin-col="bar3" value="fizz">C</option> </select> 

或者您可以使用filter() ：

 var val = $('#selector option').filter(function() { return $(this).data('origin-table') === 'foo2' && $(this).data('origin-col') === 'bar2'; }).val(); console.log(val); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="selector"> <option data-origin-table="foo1" data-origin-col="bar1" value="foo">A</option> <option data-origin-table="foo2" data-origin-col="bar2" value="bar">B</option> <option data-origin-table="foo3" data-origin-col="bar3" value="fizz">C</option> </select>