Каскадный выпадающий список с использованием JQuery / Ajax возвращает данные, повторяющие первую строку таблицы

Question

Я использую Jquery / Ajax для возврата данных на основе каскадных выпадающих списков.Когда выбран select1, он заполняет select2.Кажется, что функциональность работает нормально, но данные, возвращаемые для select2, представляют собой значение первой строки, повторенное x раз для количества возвращенных строк.Почему это происходит?

DBContext:

public class FulfillmentContext : DbContext
{
    public FulfillmentContext()
        : base("name=FulfillmentContext")
    {
    }

    public virtual DbSet<Carrier> Carriers { get; set; }
    public virtual DbSet<Fulfillment> Fulfillments { get; set; }
    public virtual DbSet<CarrierService> CarrierServices { get; set; }
}

Контроллер:

public class FulfillmentController : Controller
{
FulfillmentContext db = new FulfillmentContext();

//GET Fulfillment
public ActionResult Index()
{
    return View();
}

public JsonResult GetCarriers()
{
    return Json(db.Carriers.ToList(), JsonRequestBehavior.AllowGet);
}

public JsonResult GetServicesByCarrierId(string carrierId)
{
    int Id = Convert.ToInt32(carrierId);

    try
    {
        var services = db.CarrierServices.Where(s => s.CarrierId == Id).ToList();

        return Json(services);
    }
    catch (Exception e)
    {
        Debug.WriteLine("ERROR: " + e.Message);
        throw;
    }                        
}      
}

Просмотр:

<div class="panel panel-primary">
<div class="panel-heading">REPORT OPTIONS</div>
<div class="panel-body" style="padding-left:35px;">
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.Label("Carrier:")
@Html.DropDownList("carriers", new SelectList(string.Empty, "Value", "Text"), "Select a Carrier", new { @class = "form-control", @style = "width: auto; margin: 0 0 25px 0;" })

@Html.Label("Carrier Services:")
@Html.DropDownList("services", new SelectList(string.Empty, "Value", "Text"), "Select a Service", new { @class = "form-control", @style = "width: auto; margin: 0 0 25px 0;" })
</div>
}
</div>
</div>
</div>
@section scripts{
<script src="~/assets/scripts/form-plugin.js"></script>
<script>
$(function () {
$.ajax({
type: "GET",
url: "/Fulfillment/GetCarriers",
datatype: "Json",
success: function (data) {
    $.each(data, function (index, value) {
        $('#carriers').append('<option value="' + value.CarrierId + '">' + value.CarrierName + '</option>');
    });
}
});

$('#carriers').change(function () {

$('#services').empty();

$.ajax({
    type: "POST",
    url: "/Fulfillment/GetServicesByCarrierId",
    datatype: "Json",
    data: { CarrierId: $('#carriers').val() },
    success: function (data) {
        $.each(data, function (index, value) {
            $('#services').append('<option value="' + value.Code + '">' + value.WebName + '</option>');
        });
    }
});
});

});
}

CONSOLE.LOG (данные)

(7) […]
​
0: {…}
​​
CarrierId: 1
​​
Code: "1DM"
​​
Description: "UPS Next Day Air® Early"
​​
SortOrder: 2
​​
WebName: "UPS Next Air Early"
​​
<prototype>: Object { … }
​
1: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }
​
2: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }
​
3: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }
​
4: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }
​
5: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }
​
6: Object { CarrierId: 1, Code: "1DM", Description: "UPS Next Day Air® Early", … }
​
length: 7

Answer 1

Вам необходимо очистить тег выбора, прежде чем добавлять данные из данных Ajax с помощью $('#services').empty()

success: function (data) {
        $('#services').empty();
        $.each(data, function (index, value) {
            $('#services').append('<option value="' + value.Code + '">' + value.WebName + '</option>');
        });

Сценарий изменился на:

$(function () {
$.ajax({
type: "GET",
url: "/Fulfillment/GetCarriers",
datatype: "Json",
success: function (data) {
    $.each(data, function (index, value) {
        $('#carriers').empty();
        $('#carriers').append('<option value="' + value.CarrierId + '">' + value.CarrierName + '</option>');
    });
}
});

$('#carriers').change(function () {

$('#services').empty();

$.ajax({
    type: "POST",
    url: "/Fulfillment/GetServicesByCarrierId",
    datatype: "Json",
    data: { CarrierId: $('#carriers').val() },
    success: function (data) {
        $('#services').empty();
        $.each(data, function (index, value) {
            $('#services').append('<option value="' + value.Code + '">' + value.WebName + '</option>');
        });
    }
});
});

});
}