根据 ASP.NET MVC 5 中另一个下拉列表中的选择填充下拉列表答案

【问题标题】：Populating a dropdown based on selection in another dropdown in ASP.NET MVC 5根据 ASP.NET MVC 5 中另一个下拉列表中的选择填充下拉列表
【发布时间】：2017-11-29 20:12:45
【问题描述】：

希望有人能指出我哪里出错了。我正在开发一个 MVC 5 ASP.NET 应用程序。在我的视图中，我有一个表单，在其他控件中，有 2 个下拉框。第一个下拉列表填充了 Viewbag 中的值，但我想根据第一个下拉列表中选择的值填充第二个下拉列表。我已经阅读了很多其他帖子，但仍然无法解决。

这是下拉菜单的代码。

@Html.DropDownList("EquipmentPortList", new SelectList(ViewBag.EquipmentPortList, "hvid", "hvnamn"), "--Select Equipment--")

@Html.DropDownList("PortConnectedList", Enumerable.Empty<SelectListItem>(), "--Select Port--")

这是第一个下拉菜单的更改事件代码：-

$(document).on('change', '#EquipmentPortList', function () {
    var url = '@Url.Action("GetPortInt", "bearers")';
    var ports = $('#PortConnectedList');
    var id = $(this).val();

    $.getJSON(url, { portid: id }, function (response) {
        ports.empty();
        $.each(response, function (index, item) {
            ports.append($('</option>').text(item.portnamn).val(item.portid));
        });
    });
});

这是控制器中的方法：-

public ActionResult GetPortInt(int portid)
{
    var PortConnectedList = from h in nadb.hvportar
                            where h.porthvid == portid && (h.portnamn.Contains("NT") || (h.portnamn.Contains("Port")) || (h.portnamn.Contains("/")))
                            orderby h.portid
                            select new { h.portid, h.portnamn };

    return Json(PortConnectedList, JsonRequestBehavior.AllowGet);
}

好的，所以第一个下拉列表正确填充，当我选择一个值时，我可以看到（使用警报）更改事件触发并且该值被正确选择。

我可以通过使用断点看到触发了该方法并从数据库返回正确的数据，但之后我不知道出了什么问题，因为下拉列表没有填充。

我从另一篇文章中获取了代码更改事件代码，并对其进行了修改以适合我自己的项目，但我看不出我缺少什么。谢谢。

【问题讨论】：

在您的 $.each() 代码中添加 console.log(item.portid + ': ' + item.portnamn); 并检查输出是什么
我还建议您查看 this DotNetFiddle 中的代码 - 如果您编辑现有数据，您的代码将失败，或者您需要在 POST 方法中返回视图（第二个下拉列表将为空，尽管用户之前选择了一个值）
谢谢斯蒂芬，我已经添加了，但不知道我应该在哪里看到输出，以前没有使用过。
使用浏览器工具 (F12) 并检查浏览器控制台中的输出。在了解如何调试脚本的基础知识之前，您不应该编写脚本。对于 Chrome - 请参阅 here
斯蒂芬，您的 DotnetFiddle 链接实际上向我展示了答案。这一行：- ports.append($('</option>').text(item.portnamn).val(item.por‌tid)); 应该读为 ports.append($('<option></option>').text(item.portnamn).val(‌item.portid)); 一旦我改变它就可以了。您可以发布答案以便我接受吗？非常感谢。

标签： asp.net-mvc-5

【解决方案1】：

Stephen，您的 DotnetFiddle 链接实际上向我展示了答案。这一行：-

ports.append($('</option>').text(item.portnamn).val(item.por‌‌tid));

应该读

ports.append($('<option></option>').text(item.portnamn).val(‌‌item.portid));

一旦我改变它就可以了。非常感谢。

【讨论】：