通过jquery将项目添加到选择下拉列表没有成功答案

【问题标题】：Adding items to a select dropdown via jquery is not succeeding通过jquery将项目添加到选择下拉列表没有成功
【发布时间】：2020-10-08 22:52:58
【问题描述】：

我正在尝试在 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 控制器中，我有 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 之外的下拉列表中，则会添加这些项目。任何帮助将不胜感激。

【问题讨论】：

你不见了；添加选项后。更新它}));
响应格式是什么？地图、json 还是什么？
您正在检索数据...为什么POST?...可能缺少; @ScanQR 提到这是您的问题。
@PeterB ：这是一个错字。已更正。
@ScanQR ：已更正。还是同样的问题。响应仅是 Json

标签： jquery asp.net asp.net-mvc

【解决方案1】：

你可以试试这个：

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

【讨论】：

【解决方案2】：

因为我们没有页面的完整代码，所以很难说它为什么不工作。但请检查以下是否是您的情况之一。

您的文档中有多个具有相同 ID“StartLocation”的 HTML 元素。
Select 实际上有新的选项元素，但是因为您自定义了选择框（如 select2 或任何其他使 Select 看起来漂亮的插件），新皮肤的 Select 还不受源 Select 的影响。您需要触发一些事件让插件知道 Select 已更改。

【讨论】：

【解决方案3】：

可以尝试如下迭代您的 json，

var optionAppend = '';
$.each(data,function(i,el){
   optionAppend += '<option value="'+el.Value+'">'+el.Text+'</option>';
});

$('#StartLocation').append(optionAppend);

【讨论】：

还是一样。一切都在success 块之外工作。
@ViVi 你能告诉我在成功之外工作的完整代码吗？

【解决方案4】：

请尝试：-

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

【讨论】：

你能发布“data.length”的结果以及“data”的结构吗？

【解决方案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)););
}

【讨论】：

【解决方案6】：

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

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

【讨论】：