mvc 下拉列表的级联填充

Question

我在 MVC 应用程序中有 2 个下拉列表。 试图根据第一个选择的值（级联）填充第二个.. 由于我对 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您通过var arrivalSelect = $('#AllShipArrivals');引用了第二个 DDL var arrivalSelect = $('#AllShipArrivals'); 但是没有这样的元素（它是，但这只是一个标签），而您应该使用：

var arrivalSelect = $('#ArrivalId');

Answer 2

编辑尝试将值设为空字符串而不是 null

emptyStr="";

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

Answer 3

为第二个下拉列表制作“PartialView”或“ViewComponent”，在第一个下拉列表中更改选择时执行 ajax 调用，根据您在 ajax 调用期间传递的值选择数据，将数据传递到您的局部视图并返回。 就像是

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

在 js 'success' 中，你会得到你的看法作为回应。 将其在页面上替换为

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

例如。 更多信息： 使用 ajax 渲染局部视图