Каскадная популяция выпадающего списка mvc

Question

У меня есть 2 DropDowns в приложении MVC. Попытка заполнить второе на основе выбранного значения первого (каскадное) .. Так как я довольно плохо знаком с MVC, это вызывает у меня небольшую проблему .. Вот как это выглядит в моем представлении ..

Я получаю данные, основанные на выборе в первом DropDown

Это код JS для извлечения данных ..

<script type="text/javascript">

        $('#AllShips').change(function () {
            var selectedShip = $("#AllShips").val();
            console.log(selectedShip);
            var arrivalSelect = $('#AllShipArrivals');
            arrivalSelect.empty();
            if (selectedShip != null && selectedShip != '') {
                $.getJSON('@Url.Action("GetArrivals")', { ShipID: selectedShip }, function (arrivals) {
                    console.log(arrivals);
                    if (arrivals != null && !jQuery.isEmptyObject(arrivals))
                    {
                        arrivalSelect.append($('<option/>', {
                            value: null,
                            text: ""
                        }));
                        $.each(arrivals, function (index, arrival) {
                            console.log(arrival.Value);
                            console.log(arrival.Text);
                            arrivalSelect.append($('<option/>', {
                                value: arrival.Value,
                                text: arrival.Text
                            }));
                        });
                    };
                });
            }
        });

Вот мой HTML

<div class="col-lg-2 form-group">
                            @Html.LabelFor(model => model.AllShips, htmlAttributes: new { @class = "control-label col-md-12" })
                            <div class="col-md-12">
                                @if (Model.AllShips != null)
                                {
                                    @Html.DropDownListFor(model => model.ShipID, Model.AllShips, new { @class = "form-control", id = "AllShips" })
                                    @Html.ValidationMessageFor(model => model.ShipID, "", new { @class = "text-danger" })
                                }
                            </div>
                        </div>
                        <div class="col-lg-2 form-group">
                            @Html.LabelFor(model => model.AllShipArrivals, htmlAttributes: new { @class = "control-label col-md-12" })
                            <div class="col-md-12">
                                @if (Model.AllShipArrivals != null)
                                {
                                    @Html.DropDownListFor(model => model.ArrivalId, Model.AllShipArrivals, new { @class = "form-control" })
                                    @Html.ValidationMessageFor(model => model.ArrivalId, "", new { @class = "text-danger" })
                                }
                                else
                                { @Html.DropDownListFor(model => model.ArrivalId, null, new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.ArrivalId, "", new { @class = "text-danger" })}
                            </div>
                        </div>

Тем не менее второй DropDown не меняется (изначально я заполняю его списком всех поступлений, да, я знаю .. не очень хороший вариант)

Есть идеи, что я здесь не так делаю ??

Answer 1

Спасибо за HTML, это то, что я подозревал. В вашем JS вы ссылаетесь на 2-й DDL var arrivalSelect = $('#AllShipArrivals');, но такого элемента нет (он есть, но это просто метка), вместо этого вы должны использовать:

var arrivalSelect = $('#ArrivalId');

Answer 2

Сделайте 'PartialView' или 'ViewComponent' для второго раскрывающегося списка, сделайте ajax вызов при изменении выбора в первом раскрывающемся списке, выберите данные в зависимости от значения, которое вы передали во время вызова ajax, передайте данные в свой частичный просмотреть и вернуть. Что-то вроде

public IActionResult SecondDropdownPartial(int selectedShip)
{
    var data = GetSomeData(selectedShip);
    return Partial("ViewName", data);
}

При js «успехе» вы получите свое мнение в ответ. Замените его на странице, например,

$('#container').html(response);

. Дополнительная информация: Визуализация частичных видов с использованием ajax

Answer 3

* Отредактированный

попробуйте сделать значение пустой строкой, а не нулевым

emptyStr="";

arrivalSelect.append('<option value="${emptyStr}"> ${emptyStr} </option>'); arrivalSelect.append('<option value="${arrival.Value}"> ${arrival.Text} </option>');