Question

我正在尝试使用ASP.NET MVC中的jquery动态填充下拉列表中的项目。

这是我的观看代码：

<select id="StartLocation" class="custom-select", onchange = "highlightMarkerById(this.value,0)">
    <option value="">-Start Location-</option>
</select>

这是我调用以获取数据的函数：

function GetLocations() {
    $.ajax({
        type: "POST",
        url: "/MV/GetLocations",
        dataType: "json",
        success: function (data) {
            for (var j = 0; j < data.length ; j++) {
                $('#StartLocation').append($('<option>', {
                    value: data[j].Value,
                    text: data[j].Text
                }));
            }
        },
        error: function () {
            return "error";
        }
    });
}

在MV Controller中，我有GetLocations动作方法，如下所示：

[HttpPost]
public JsonResult GetLocations()
{
    List<vlocation> locationslist = DBManager.Instance.GetLocations();
    List<SelectListItem> locations = new List<SelectListItem>();
    foreach(var loc in locationslist)
    {
        locations.Add(new SelectListItem { Value = loc.displayName, Text = loc.displayName });
    }

    return Json(locations);
}

我在chrome中进行了调试，发现已达到success并且for循环也在迭代中。但我无法弄清楚为什么这些物品没有被添加到下拉列表中。如果我使用相同的代码将一些项目添加到success内的下拉列表中，则会添加项目。任何帮助将不胜感激。

Answer 1

可以尝试迭代你的json，如下所示，

adjacent

Answer 2

你可以试试这个：

 for (var j = 0; j < data.length ; j++) {
                $('#StartLocation').append("<option value="+data[j].Value+" >"+data[j].Text+"</option>");
            }

Answer 3

请尝试： -

for (var j = 0; j < data.length ; j++) {
   $("#StartLocation").append($('<option></option>').val(data[j].Value).html(data[j].Text));
}

Answer 4

因为我们没有完整的页面代码，所以很难说它为什么不起作用。但请检查以下是否是您的一个案例。

您的文档中有多个HTML元素具有相同的ID“StartLocation”。
选择实际上有新的选项元素，但由于你有自定义的选择框（如select2或任何其他插件使选择看起来很漂亮），新加蒙的选择不受源选择。您需要触发一些事件才能让插件知道选择已更改。

Answer 5

你可以试试这个：

[HttpPost]
public JsonResult GetLocations()
{
    List<vlocation> locationslist = DBManager.Instance.GetLocations();
    List<SelectListItem> locations = new List<SelectListItem>();
    foreach(var loc in locationslist)
    {
        locations.Add(new SelectListItem { Value = loc.displayName, Text = loc.displayName });
    }

    return Json(new SelectList(locations, nameof(SelectListItem.Value), nameof(SelectListItem.Text)););
}

Answer 6

当我评论“ owl.carousel.min.js”或删除它时，我解决了这个问题。

 @*<script src="~/Scripts/js/owl.carousel.min.js"></script>*@

通过jquery向选择下拉列表添加项目不成功

6 个答案: