Jquery 选择器按其值获取下拉列表

Question

我找不到找到具有特定值的下拉列表的方法。

ex1:

$('[value="' + $(e.currentTarget).attr('name') + '"]')

给我带有值的选项。

ex2：

$('[value="' + $(e.currentTarget).attr('name') + '"]').parent()

给我正确的下拉菜单。但是，如果我有多个具有相同值的选项的 <select> 元素，我会得到更多结果。

无法按值找到<select> 元素？

提前致谢

Answer 1

:has() selector 可用于定位SELECT 和:selected selector 用于选择的选项。

选择包含至少一个与指定选择器匹配的元素的元素。

var selects = $('select:has(option:selected[value="' + $(e.currentTarget).attr('name') + '"])');

var v = 1;
var selects = $('select:has(option:selected[value="' + v + '"])')
selects.css('color', 'green')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="0">0</option>
  <option value="1">1</option>
</select>
<select>
  <option value="2">2</option>
</select>
<select>
  <option value="0">0</option>
  <option value="1" selected>1</option>
</select>

---

或者，使用.filter()

var selects = $('select').filter(function() {
   return $(this).val() == $(e.currentTarget).attr('name');
});

var v = 1;
var selects = $('select').filter(function() {
  return $(this).val() == 1;
});
selects.css('color', 'green')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="0">0</option>
  <option value="1">1</option>
</select>
<select>
  <option value="2">2</option>
</select>
<select>
  <option value="0">0</option>
  <option value="1" selected>1</option>
</select>