jQuery中val()方法在HTML选择文本上优先于值

Question

以下是一个 HTML select 的例子：

<select name="selValues" id="selValues">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">5</option>
    <option value="4">3</option>
</select>

如果我们编写以下jQuery语句：

$('#selValues').val('2'); // Two will get selected
$('#selValues').val('3'); // 3 will get selected instead of 5??

为什么会这样呢？

- Zuhaib

---

在jquery.com上发布此错误作为bug。 - Marius

就像我在回答中所解释的那样，“这不是一个错误，而是一个特性。” - Michał Kwiatkowski

Answer 1

val() 方法获取或设置所选文本。您可能希望使用 selectedIndex：

$('#selValues').get(0).selectedIndex=2; 

- kgiannakakis

Answer 2

使用

$("#selValues option[value='3']").attr('selected', 'selected');

这是一篇关于jQuery选择元素的好文章：

jQuery - 选择元素 - 技巧和窍门

- rahul

---

是的，那个语句是可以工作的，我知道。但是，如果要选择的值不在列表中，则所选值应更改为-1（未选择任何项）。但是使用此语句无法实现这一点。 - Zuhaib

Answer 3

在选择选项时，jQuery首先查看选项的值，然后查看选项的文本。它还按顺序遍历选项。因此，$('#selValues').val('3')首先选择选项3，但紧接着更改选择为选项4（因为它的文本是“3”）。使用多选来查看实际上选择了两个选项。

<select name="selValues" id="selValues" multiple="multiple">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">5</option>
    <option value="4">3</option>
</select>

- Michał Kwiatkowski

---

你是对的，但这没有解决我的问题。如果我在选择器中指定值，它会起作用。'#selValues option[value="3"]'但是，如果我要选择的值不在列表中，则不应选择任何项目。如果我只是写:$('#selValues')[0].value = <Value Here>;那么使用jQuery就不会出现这种情况，但是使用普通JavaScript会出现这种情况。 - Zuhaib

Answer 4

从JQuery 1.4开始，这已经变得明确无误。现在它将按值选择，而不是按文本值http://jquery14.com/day-01#backwards 如果您仍然需要按值选择，则建议的方法是在这里。

- Guy C