使用 Jquery 和 Ajax 填充下拉菜单答案

【问题标题】：using Jquery and Ajax to populate dropdown使用 Jquery 和 Ajax 填充下拉菜单
【发布时间】：2017-06-14 15:31:56
【问题描述】：

我正在尝试根据另一个下拉列表的选择动态填充下拉列表。我有这个在我的开发环境中工作，但是当我在一个实例中将它提升到 IIS 服务器时它不起作用。我在创建和编辑两个地方使用相同的代码。当您第一次进入屏幕时，它会加载制造商下拉菜单，然后根据您选择的内容加载模型下拉菜单。这适用于创建，但不适用于编辑。使用编辑我有一个额外的功能，我将一个初始值传递给下拉菜单。但是，当我选择一个新的制造商时，这有效，当它尝试加载模型下拉列表时出现错误。在我调试时的响应标头中，我得到了Content-Type: text/html，而不是预期的:json。我觉得这与我传递这个初始值的方式有关，因为我不知道它在 IIS 服务器上可能是什么，因为它在一个区域而不是另一个区域工作。

我的控制器的 GET 编辑

PopulateModel(manufacturer.ManufacturerID, manModel.Model);

private void PopulateModel(int? manufacturerID, object selectModel = null)
    {
        var model = db.ManufacturerModels
            .Where(x => x.ManufacturerID == manufacturerID)
            .OrderBy(x => x.Model);

        ViewBag.dropdownModel = new SelectList(model, "Model", "Model", selectModel);
    }

查看编辑 -

@Html.DropDownList("dropdownModel", null, htmlAttributes: new { @class = "form-control" })

$('#dropdownManufacturer').change(function () {
            $('#dropdownModel').empty();

            $.ajax({
                type: "POST",
                url: "/Device/GetModelsByManufacturerID",
                datatype: "Json",
                data: { manufacturerID: $('#dropdownManufacturer').val() },
                success: function (data) {

                    $.each(data, function (index, value) {
                        $('#dropdownModel').append('<option value="' + value + '">' +
                            value + '</option>');
                    });
                },
                error: function (error) {
                    alert("Error Ajax not working: " + error);
                }
            });
        });

【问题讨论】：

datatype: "Json", 应该是dataType: "json",
我敢打赌，如果你按 F12，你会看到一些控制台消息
记住 $.each 比简单的 for 循环慢 8 倍
我将其更改为 `"json" 仍然收到错误。我正在使用 FireFox Firebug 进行调试。这是我看到响应头的地方。
你把datatype改成dataType了吗

标签： jquery ajax cascadingdropdown

【解决方案1】：

我能够解决问题。在请求 URL 中，它缺少一条信息。出于某种原因，在 Create 视图中它会转到正确的 URL，但在 Edit 视图中却不是。我必须明确告诉它去哪里。一旦我添加了缺失的信息，它就会按预期工作，-

以前我有url: "/Device/GetModelsByManufacturerID", 我通过将其修改为 url: "/RMS_SMM/Device/GetModelsByManufacturerID", 来解决此问题。

感谢所有提供建议的人。

【讨论】：