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>

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

1 个答案: