用于选择元素的 jQuery .val() 返回文本

Question

用于选择元素的 jQuery .val() 是否只返回文本而不返回数字？ 当你需要进行值比较时，你知道有问题。

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

来自 jQuery 文档 > 值： 类型：字符串或数字或数组 与每个匹配元素的值相对应的文本字符串、数字或字符串数​​组，以设置为选中/选中。

.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>

Answer 1

你得到你在select元素的value属性中设置的值，它是“1”或“2”，但是作为一个字符串，输入值永远都是字符串（即使您在 HTML5 中可能有像 valueAsNumber 这样的访问器）。

如果您想将其作为数字获取，请使用

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

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

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

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

Answer 2

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

如果我们在很棒的jQuery Source Viewer 中查看.val() 的源代码，我们可以看到有一个sn-p 可以将数字转换为字符串并在将它们设置为值之前连接数组。

// 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 + "";
    });
}

但是，如果我们信任声明 Returns: String or Number or Array 的 jQuery 文档，您似乎确实想要返回值，并且 .val() 在理论上能够返回数字。如果类型是字符串，则检查结果，如果是，则删除 \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 interface 中不可用。

我快速搜索了最新的 jQuery 资源（包括最新的 nightly 和 1.11 版本），但今天没有一个使用 valueAsNumber。只是在这里推测，但这可能已经在valueAsNumber 提出之前添加到文档中以防万一。

因此，除非您自己使用valueAsNumber，否则您似乎暂时被字符串困住（除非您添加一些手动验证，否则它实际上应该只用于<input type="number" /> or <input type="range" />）。