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 渲染局部視圖