使用 javascript 查找表单选择元素的长度

Question

我尝试了几种不同的变体来查找选择元素的长度，但没有任何效果！我不明白为什么，因为几个网站将其列为正确的代码。

这是 javascript：

<script type="text/javascript"> 
    alert(document.getElementById("opentimes").options.length);
</script>

这是表单：

<form action="eateries.php" method="POST" name="filters">
        <select name="opentimes" id="opentimes" onChange="document.forms.filters.submit();">
            <option value="now">Open Now</option>
            <option value="tonight">Open Tonight</option>
            <option value="late">Open Late</option>
            <option value="whenever">Open Whenever</option>
        </select>
.......
</form>

我知道警报正在工作，因为我已经用简单的字符串对其进行了测试。我尝试过像 document.filters.opentimes.length 和 document.forms.filters.opentimes.length 这样的变体，但没有任何效果！

谢谢。

Answer 1

你的代码实际上是有效的，但我猜你的代码是在 DOM 加载之前执行的。例如，尝试一下：

<script type="text/javascript"> 
    window.onload = function(){
        alert(document.getElementById("opentimes").options.length);
    };
</script>

加载网页上的 HTML 结构时，将执行 window.onload = function(){ ... }; 中包含的所有代码。从那时起，您就可以使用 document.getElementById() 方法。

另外，您可以将代码移至文档末尾，但我不建议这样做。太丑了。

Answer 2

执行顺序。您可能尝试在#opentimes 存在于 DOM 中之前访问它。

尝试将 JavaScript 放在 的下方（按源代码顺序）或将其包装在正文的加载事件中。

第二个建议正在实施

<script type="text/javascript"> 
  onload = function()
  {
    alert(document.getElementById("opentimes").options.length);
  }
</script>

但请注意 - 如果其他脚本正在使用它，您通常可以覆盖其他“加载”功能。