jQuery中的.val()方法用于获取<select>元素的文本值。

Question

jQuery .val()对于选择元素只返回文本而不是数字吗？ 当您需要进行值比较时，就会出现问题。

我知道如何通过parseInt()解决这个问题，或者只需将其与字符串进行比较，或者根本不使用jQuery，但我不知道这是否是一个错误，还是jQuery的工作方式。

从jQuery文档中可以看到： > Value: Type: String or Number or Array A string of text, a number, or an array of strings corresponding to the value of each matched element to set as selected/checked.

.val()返回：字符串、数字或数组

// Put any number here 0 is the default selected value
var comparison_value = 0;

$('button').click(function () {

    $('div#typeof').text(typeof ($('select').val()));

    if ($('select').val() === comparison_value) {
        $('div#comparison').text('You just passed a test');
    } else {
        $('div#comparison').text('You just failed a test');
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
    <option value="0" selected>Select Something</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<button>Gimme back my selection</button>
<div id='typeof'></div>
<div id='comparison'></div>

- codegaze

---

元素的值始终是一个字符串，它从来不是数字类型。这与jQuery无关，而是在规范中定义的方式。 - adeneo

您发布了关于setter val()方法的引用。 - A. Wolff

val(value) - 设置器。 - Shaunak D

@A.Wolff：这也是我想说的，但getter的文档还说它会返回一个字符串、数字或数组。所以这并不重要。 - Felix Kling

@FelixKling 确实如此（我也错过了），即使我不确定在哪种情况下它会返回一个数字。然后我读了Karl-Johan的答案，可能可以解释这个问题。 - A. Wolff

Answer 1

您得到的是`select`元素中`value`属性中设置的值，该值为字符串“1”或“2”。但是，无论如何输入值始终是字符串（即使您可能在HTML5中使用像`valueAsNumber`这样的访问器）。如果您想将其作为数字获取，请使用：

var selectedValue = +$('select').val();

如果您想要选择的选项的索引，请使用：

var selectedIndex = $('select')[0].selectedIndex;

现在，关于你引用的文档摘录：它是关于设置值的。如果你传递一个数字，它将被转换为字符串（如果你调用.val()来获取值，你将得到一个字符串）。

- Denys Séguret

---

“值的索引”是一个简洁的缩写，但“选择元素当前选定选项的索引”会更准确。 - Roamer-1888

请重新表述：@Roamer-1888 - Denys Séguret

抱歉，我误解了你关于 valueAsNumber 的陈述，已删除评论 :( - A. Wolff

Answer 2

你正在阅读的是值参数的描述，而不是返回的值。

如果我们查看 jQuery Source Viewer 中 .val() 的源代码，我们可以看到一个片段将数字转换为字符串并将数组连接起来，然后将它们设置为值。

// Treat null/undefined as ""; convert numbers to string
if (val == null) {
    val = "";
} else if (typeof val === "number") {
    val += "";
} else if (jQuery.isArray(val)) {
    val = jQuery.map(val, function (value) {
        return value == null ? "" : value + "";
    });
}

然而，您似乎确实希望返回值。理论上，.val() 可以返回数字，如果我们相信 jQuery 文档中所述的 Returns: String or Number or Array。该结果会被检查是否为字符串，如果是，则删除\r并返回字符串；否则进行空值检查，可能会返回实际值或空字符串（注释为数字或空值可用）。

return typeof ret === "string" ?
    // handle most common string cases
    ret.replace(rreturn, "") :
    // handle cases where value is null/undef or number
        ret == null ? "" : ret;

在全局命名空间中声明了rreturn变量，如下所示：var rreturn = /\r/g;，因此您无法在源浏览器中找到它。

所以这里真正的问题是DOM是否可以返回数字作为值？答案似乎是“是的，但只有在您明确要求时才能返回”。自HTML5以来，HTMLInputElement接口上有一个新的valueAsNumber-property，它将返回可能的值作为数字或NaN（如果不可转换）。不过，这似乎仅适用于HTMLInputElement，例如在HTMLSelectElement接口中不可用。

我快速搜索了最新的jQuery源代码（包括最新的夜间版本和1.11版本），今天都没有使用 valueAsNumber 。只是猜测，在提出 valueAsNumber 之前，可能已将此添加到文档中，以防万一。

所以看起来你暂时只能使用字符串，除非你自己使用valueAsNumber（这应该只用于<input type="number" />或<input type="range" />，除非你添加一些手动验证）。

- Karl-Johan Sjögren

---

感谢您的出色回答。但是这种字符串比较会导致未来的错误吗？ - codegaze

我认为可以安全地假设在jQuery 1.x和2.x中.val()将继续返回字符串。如果他们在一个小版本中更改了这个，那么很多东西都会在网上出现问题。不过谁知道在3.x中会发生什么呢。 - Karl-Johan Sjögren

@idioteque，忽略选择多个特殊情况（其中.val()返回null或数组），可以安全地假设返回值是字符串，并使用parseInt(x)、parseFloat(x)、Number(x)或+x重新转换为数字，如果x已经是数字，则不会抛出错误。 - Roamer-1888