为什么我的HTML选择不让我访问选项？

Question

我的html中有一个select元素。我用JS选项填充它。

<select name="send_hour" class="input-mini" id="send_hour"></select>

我有Javascript尝试访问其选项长度。

$("#send_hour").options.length

当我在此行放置一个断点，然后在控制台中键入以下内容时，我得到以下内容。

hr = $("#send_hour");

我在控制台中找到了这个（如果我单击hr旁边的向下箭头）：

hr = $("#send_hour");
{…}
0: <select id="send_hour" class="input-mini" name="send_hour">
context: HTMLDocument https://bubbb.com/requester/index#
length: 1
selector: "#send_hour"
__proto__: Object { jquery: "1.11.3", constructor: at(), length: 0, … }

如果我在{...}旁边打开向下箭头，则可以看到选项的属性。

为什么$("#send_hour").options无法获得这些选项？它回来不确定吗？

Answer 1

options是可在HTMLSelectElement对象上找到的属性。

您正在查看jQuery对象。

有一个选择元素，它包裹着jQuery对象，您可以在名为0的属性中找到它。 （所有与选择器匹配的元素都以jQuery对象类似于数组的形式呈现。）

$("#send_hour")[0].options.length

…但是如果您不打算使用任何jQuery功能，则最好使用本机方法：

document.querySelector("#send_hour").options.length

Answer 2

$("#send_hour").options是无效的jQuery。您在寻找什么$("#send_hour option")。

对于类似HTML的

<select id="send_hour">
    <option>A</option>
    <option>B</option>
</select>

#send_hour option表示找到ID为send_hour的元素，并找到所有称为option的子级。请阅读jQuery documentation了解更多详情。