mvc 下拉列表的级联人口

Question

我在 MVC 应用程序中有 2 个 DropDowns。尝试根据第一个选择的值（级联）填充第二个.. 由于我对 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 = $('#ArrivalId');

Answer 2

为第二个下拉菜单制作'PartialView'或'ViewComponent'，在第一个下拉菜单中更改选择时执行ajax调用，根据您在ajax调用期间传递的值选择数据，将数据传递到您的局部视图并返回它. 类似的东西

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

在 js 的“成功”中，你会得到你的观点作为回应。在页面上用

替换它

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

例如。 更多信息：Rendering Partial Views using ajax

Answer 3

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

emptyStr="";

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