所以，我的Javascript代码有问题。我使用级联下拉菜单，一个是汽车品牌，另一个是汽车型号。根据逻辑，当我从下拉菜单中选择一个品牌时（例如丰田或奥迪等），第二个下拉列表应显示所选品牌的车型。通常，我在控制器中使用GetModelsJson方法连接Brand和Model表，并将模型作为json返回。

public JsonResult GetModelsJson(int p)
        {
            var models = (from x in GetModels() 
                          join y in GetBrands() on x.BrandId equals y.Id 
                          where x.BrandId == p
                          select new
                          {
                              Text = x.Name,
                              Value = x.Id.ToString()
                          }).ToList();
            return new JsonResult(new { data = models });
        }

在视图中，我希望使用以下代码显示下拉列表：

@Html.Label("Brands")
@Html.DropDownList("drpBrand",Model.BrandList,"--Select Brand--", new {@class = "form-control"})
@Html.Label("Models")
@Html.DropDownList("drpModel",Model.ModelList,"--Select Model--", new {@class = "form-control"})

问题从javascript代码开始。一切正常，直到一个for循环。由于某种原因，数据变量的长度和其他字段，如文本和值是未定义的。

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    $(function(){
        $('#drpBrand').change(function(){
            var id = $('#drpBrand').val();
            $.ajax({
                url: '/Admin/Vehicle/GetModelsJson',
                data: {p : id},
                type: "POST",
                dataType: "Json",
                success: function(data){
                    console.log(data);
                    $('#drpModel').empty();
                    for (let i = 0; i < 3; i++){
                        $('#drpModel').append("<option value ='" + data[i].value + "'>" + data[i].text + "</option>");
                    }
                }
            });
        });
    });
</script>

因此，型号的第二个下拉列表变为空。Picture of the web site
正如你可以看到，从这张图片，第二个下拉菜单是空的，虽然根据控制台数据有它的字段像“A5”，“A4”，“A6”。