Question

有没有人知道一种简单的方法，使用jQuery来选择val（）属性产生特定值的所有<select>元素？

我正在尝试做一些验证逻辑，并希望只用一个选择器选择所有这些元素，然后对每个父母应用一个警告类。我知道如果选择所有元素后该怎么做，但我没有看到处理这种情况的选择器。

我是否必须将所有<select>元素选择到选择器中，然后遍历它们并检查它们的每个值？我希望有一种更简单的方法。

感谢。

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属性 - ＆gt; 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的{{ 1}}在这里使用是安全的，因为它提供了获取第一个选定选项的相同方法，即使在不支持此选项的浏览器上也是如此。）

Answer 2

现有答案不适用于选择标签，但我发现了一些确实存在的问题。要求选择具有所选选项。

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

Answer 3

Attribute selectors我相信你正在寻找的东西。

像$+('element[attribute="value"]')

这样的东西

另见：

*= anywhere
^= starts with
$= ends with
~= contains word
等

Answer 4

您可以使用：

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

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

Answer 5

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

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

然后您可以执行以下操作：

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

$ matches将具有所有匹配项。

这比必须遍历元素要容易得多。请记住，在呈现页面时将选择值设置为初始值，这样就不必为每个选择触发更改事件，因此可以设置选择值。

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

5 个答案: