选择元素的选项为空

Question

我在 select2 元素中有一个产品列表。它显示如下：

    <select name="product" class="select2 form-control select2-hidden-accessible">
        <option value="138" data-select2-id="60">Option1</option>
        <option value="39" data-select2-id="78">Option2</option>
        // several more options here
     </select>

尽管这看起来是正确的，但当我迭代这样的选项时：

 for (let i = 0; i < select.options.length; i++) {
    console.log(select.options[i]);
}

我得到 1 且只有 1 个（即使有多个选项）记录一个空选项元素的条目，例如：

<option value="" selected="" data-select2-id="8">

有什么想法可能会出错吗？

Edit1：我在同一页面中有几个选择，它们都使用迭代选项的相同函数。这是我唯一遇到的问题。

Answer 1

您的代码中有语法错误：

在此语句select.options.length 中，select 不是有效的选择器或变量（根据您在问题中给出的代码）。它会给你一个 select is undefined 错误。

将你的 for 循环切换到这个：

var dropDown = document.querySelector('.select2');
for (let i = 0; i < dropDown.options.length; i++) {
    console.log(dropDown.options[i]);
}

这将显示两个选项。