使用 .each 从 jsonresult 填充下拉列表答案

【问题标题】：populate dropdownlist from jsonresult using .each使用 .each 从 jsonresult 填充下拉列表
【发布时间】：2016-12-01 23:29:26
【问题描述】：

我有一个下拉列表，我需要根据另一个选择动态填充该下拉列表。这一切都有效，以至于我必须先清除列表后在下拉列表中呈现新数据。列表清除，但无法填充从控制器返回的新数据。我正在尝试为此使用 .each。

这是有问题的控制器方法：

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult UpdateDocumentSubType(string DocumentType)
{
    List<SelectListItem> DocumentSubTypeList = new List<SelectListItem>();
    PropertyModel model = new PropertyModel();
    int DocTypeID = 0;
    //get DocTypeID
    DocTypeID = model.GetDocTypeID(DocumentType);
    //gets new document subtype list
    DocumentSubTypeList = model.GetDocumentSubTypes(DocTypeID);
    //return document subtype list
    return Json(DocumentSubTypeList, JsonRequestBehavior.AllowGet);
}

如您所见，我返回的是 List 的序列化 json 结果。

在观点上，我有以下几点：

$.ajax({
    url: '@Url.Action("UpdateDocumentSubType","Document")',
    type: 'GET',
    dataType: "json",
    data: { DocumentType: SelectedDocTypeText },
    async: true,
    success: function (data) {
        var select = $("#Docs_DocumentSubTypeID");
        select.empty();
        $.each(data, function (index, item) {
            select.append($('<option></option>').val(item).html(index));
        });
    }
});

这就是一切崩溃的地方。代码命中 select.empty(): 并成功执行，但作为 SelectListItem 的“文本”值，它改为提供对象数组的索引元素。本质上，标签呈现如下内容：

<option value="[object Object]">1</option>
<option value="[object Object]">2</option>
<option value="[object Object]">3</option>
<option value="[object Object]">4</option>

我已验证数据正在传递。当我将 .each 放入自己的函数中时，调用该函数并添加“调试器；”对于它，我可以将生成的“数据”中的数据视为 [object, object] 的四个元素。

您可能已经猜到了，JQuery 不是我的强项，因此我们将不胜感激。 :)

【问题讨论】：

您在data 中得到了什么。你能把它花在你的问题上吗

标签： javascript jquery json asp.net-mvc

【解决方案1】：

首先，您不应该在您的UpdateDocumentSubType 方法中返回List<SelectListItem> - 当您从不使用它们时，将SelectListItem 的额外属性返回给客户端是没有意义的。您只需要返回一个包含 2 个属性的匿名对象，一个用于选项值，一个用于显示文本。

你没有展示模型，但假设它包含属性比如int ID和string Name，那么它会是（比如）

var data = db.YourTable.Where(...).Select(x => new
{
    Value = x.ID,
    Text = x.Name
};
return Json(data, JsonRequestBehavior.AllowGet);

您看到value="[object Object]" 的原因是您返回一个复杂对象数组，所以$.each(data, function (index, item) { 中的item 指的是包含属性Value、Selected、Text、Group 的对象等（即SelectListItem的属性），所以你的脚本需要是

$.each(data, function (index, item) {
    select.append($('<option></option>').val(item.Value).html(item.Text));
});

【讨论】：

【解决方案2】：

我也是新手，所以这可能不正确。试试

    $('<option></option>').val(item[index]).html(index));

或

    $('<option></option>').val(item[0]).html(index));

而不是你写的。

我需要更多信息。可以分享一下github repo吗？

我正在做一些非常相似的事情，这就是我所做的：

（查看第 85 到 96 行的渲染函数） https://github.com/stephenhu3/codepal/blob/development/js/youtubeComponent.js

它对我有用。

【讨论】：