jquery：选择器？

给定一个SELECT元素：

 foo bar baz  

我想选择值为“bar”的OPTION元素。

这不起作用：

 $('option[text="bar"]').attr('selected', true); 

但是，这确实有效：

 $('option:[text="bar"]').attr('selected', true); 

为什么？

现场演示： http ： //jsfiddle.net/YbfqZ/2/

Answer 1

这种行为的原因是冒号破坏了querySelectorAll的选择器，因为它无效。

因此，它默认为Sizzle，它可以容忍冒号，即使它在技术上不受支持（这意味着它可能会在未来中断）。 Sizzle将检查属性和属性。 因此，它不会找到text属性，但会找到元素的text属性。

这是一个示例 ，演示Sizzle将匹配属性而不仅仅是attribute-equals选择器的attribute-equals 。

---

代码示例：

  // set a custom property on the last option $('#id option').slice(-1)[0].customProp = 'customValue'; // breaking the selector with : we default to Sizzle, // which matches our custom property $('#id option:[customProp="customValue"]').attr('selected', true); 

---

编辑： 我的示例链接先前引用了别人的示例，因为我键入了错误的修订号。 固定。

Answer 2

这样做的正确方法是给SELECT一个id，并给出OPTION项值。 然后您可以设置选择的值。

  foo bar baz  

JS看起来像这样

 $('#theSelect').val('foo'); 

现场演示 http://jsfiddle.net/YbfqZ/4/