使用 JQuery 错误填充选择列表

Question

我有以下代码来填充表单上的下拉框。该代码似乎可以工作，但会引发错误“cannot read property id of undefined”。

jquery

function LoadAnnualCredits() {
    try {
        var $dropdown = $("#creditQty");
        $dropdown.empty();
        var arrayList = [
            { "Id": 5000, "Name": "5,000" },
            { "Id": 10000, "Name": "10,000" }
        ];
        for (var i = 0; i <= arrayList.length; i++) {
            $dropdown.append($("<option />").val(arrayList[i].Id).text(arrayList[i].Name));
        }
    }
    catch (err) {
        alert(err);
    }
}

Razor 查看代码

@Html.DropDownListFor(m => m.NumCredits, Model.CreditQty, "Choose Qty", new { @class = "form-control", @id = "creditQty", @style = "width: 160px; height: 36px; line-height: 36px; padding: 4px;", @onchange = "CreditQtyChanged(this.value);" })

我尝试使用 forEach 方法。没有错误消息，但由于某种奇怪的原因，它在下拉列表中给了我重复的项目：

5,000

5,000

10,000

10,000

function LoadAnnualCredits() {
    try {
        var $dropdown = $("#creditQty");
        $dropdown.empty();
        let arrayList = [
            { "Id": 5000, "Name": "5,000" },
            { "Id": 10000, "Name": "10,000" }
        ];
        arrayList.forEach(function (e) {
            $dropdown.append($('<option><option/>').val(e.Id).text(e.Name));
        });
    }
    catch (err) {
        alert(err);
    }
}

Answer 1

您的错误可能是 FOR 循环的条件，它是 (i ，更改为 (i ，变量"i" 等于0，所以它找不到位置等于2，因为它的数组只有两个元素（去到位置 1)。 Javascript 中的数组从 0 开始， 所以找不到位置 2 的元素，这就是你正在做的事情。只需更改条件即可解决问题。