jQuery：选择所有具有特定val（）的“select”元素

Question

有没有人知道使用jQuery一种简单的方法，可以选择所有val()属性为特定值的元素？我正在尝试进行一些验证逻辑，并希望只需通过一个选择器就能选择所有这些元素，然后将警告类应用于它们的每个父元素。一旦我选择了所有元素，我知道如何做到这一点，但我没有看到一个处理这种情况的选择器。我需要先将所有元素选择到一个选择器中，然后遍历它们并检查它们的每个值吗？我希望有更简单的方法。

谢谢。

- Matt

Answer 1

为什么select[value=x]无法正常工作？首先，因为<select>实际上没有value属性。选择框并没有单一的值：可能没有选定的选项（通常不应该有，但至少在IE中可以），在<select multiple>中，可以选择任意数量的选项。

即使是input[value=x]也无法正常工作，尽管<input>确实有一个value属性。它确实起作用了，只是它并不会做你想要的事情。它获取的是HTML中value="..."属性的值，而不是你输入到表单中的当前值。 value="..."属性实际上对应于defaultValue属性而不是value属性。

同样地，option[value=x][selected]也无法正常工作，因为它检查的是HTML源代码中的<option selected>属性（selected属性-> defaultSelected属性），而不是选项的当前选中状态（selected属性不是属性）。选项的选中状态自加载页面以来可能已经改变。

除了IE之外，其他浏览器都能正确获取value、selected等表单属性。

（再次提醒）：Tesserex的示例似乎可以正常工作，原因是它使用了非标准的jQuery特定选择器:has。这会导致现代浏览器的本机querySelectorAll方法失败，进而导致jQuery退回到自己的（本地JavaScript、速度较慢）选择器引擎。该选择器引擎存在一个错误，它混淆了属性和属性值，从而使[value=x]能够像你期望的那样工作，而不会像应该有的那样失败！（更新：在更新版本的jQuery中可能已不再存在此问题。）

总结：表单字段状态检查和选择器不兼容。除了这些问题外，你还必须担心转义问题——例如，如果你想要测试的值包含引号或方括号怎么办？

所以，相反地，你应该手动进行检查。例如使用筛选器：

$('select').filter(function() {
    return $(this).val()==='the target value';
}).parent().addClass('warning');

HTML5中有一个value 属性，被现代浏览器支持，在读取时可以给你第一个选择的<option>的值。jQuery的val()在这里是安全的使用方式，因为它提供了获取第一个选项的相同方法，即使在不支持此功能的浏览器上也能正常工作。

- bobince

---

哇，所以我的答案之所以有效是因为“value”的解释存在漏洞？有趣。 - Tesserex

这并不是非常有趣...在我看来，更让人愤怒的是它令人困惑！DOM的这个领域充满了误解和漏洞，在浏览器和应用程序中都如此，这会让工作变得非常困难。 - bobince

那意味着这个可能不起作用：$("p").not(".hidden_control").find('option:selected[value=""]')，原因和Tesserex的代码一样？另一种选择似乎不太优雅，这真是遗憾... - Danny Staple

@Danny：实际上我认为这应该可以工作（至少在现代的jQuery中 - 更新了答案文本，因为jQuery对属性与属性的处理方式已经改变）。 :selected 被定义为（由jQuery定义 - 它不是标准的CSS伪类）基于当前选定状态而操作，而不是属性值（如 [selected]）。 - bobince

Answer 2

现有的答案不能在选择标签上运行，但我找到了一些可行的方法。请求一个具有选定选项的选择器。

$("select:has(option[value=blah]:selected)")

- Tesserex

Answer 3

属性选择器 是你要找的东西吧。

类似这样的 $+('element[attribute="value"]')

另请参阅：

• *= 任意位置匹配
• ^= 以...开头
• $= 以...结尾
• ~= 包含单词
• 等等。

- Brad Christie

---

那个语法不幸地不能与选择标签一起使用。但是它可以与其他输入元素一起使用。 - Tesserex

@Tesserex：你说得对。我不是要明确提到，而是语法。我已经把它改得更加模糊了，谢谢。 - Brad Christie

实际上，它并不一定适用于任何输入元素。也就是说，.val() 返回的是一个属性的当前值，而不是一个属性的原始值，这正是[attribute='value']所测试的。 - Auspex

Answer 4

你可以使用：

$("select[value=X]");

其中 X 是您想要检查选择值的值。

- Sheavi

Answer 5

您可以创建一个更改事件，每当值更改时，将该值放入选择元素上的自定义属性中。然后，您可以使用简单的选择器查找所有具有该值的选择元素。例如：

$("select").on("change", function (e) {
    var $select = $(e.currentTarget);
    $select.attr("select-value", $select.val());
});

然后你可以这样做：

var $matches = $("select[select-value='" + searchVal + "']");

$matches将包含所有匹配的选择。

这比迭代元素要容易得多。记得在渲染页面时将select-value设置为初始值，这样您就不需要为每个选择器触发更改事件，以便设置select-value。

- Jim Berg