级联下拉AJAX循环调用

Question

我的表单中有一部分用户可以输入建筑物和房间，如果他们想进入另一个建筑物和房间，请单击添加按钮。我正在使用 AJAX 根据建筑物选择填充房间。它适用于第一组，但一旦我单击“添加”并且页面重新加载，它就会重新提交 Ajax 调用，因此删除用户选择的选项。

一旦我单击“添加”，就会有两个用于建筑物的下拉列表和两个用于房间的下拉列表，无论我单击哪个建筑物下拉列表，它只会影响第二个房间下拉列表。

如有任何指导，我们将不胜感激。

            for (var a = 0; a < @Model.OnCampusSchedules.Count; a++) {
                var buildingSelectId = '#BuildingSelect_' + a;
                var roomSelectId = '#RoomSelect_' + a;

                var selectedBuildingValue = $(buildingSelectId).val();
                var selectedRoomValue = $(roomSelectId).val();

                $(buildingSelectId).change(function () {
                    var selectedBuilding = $(this).val();
                    var roomSelect = $(roomSelectId);

                    $(roomSelect).empty();

                    roomSelect.addClass('spinner').prop('disabled', true);


                    $.ajax({
                        url: '@Url.Action("GetRoomNumbers", "External")',
                        type: 'GET',
                        data: {
                            building: selectedBuilding,
                        },
                        success: function (data) {
                            if (data.length > 0){
                                $(data).each(function (index, item) {
                                    roomSelect.append('<option value="' + item + '">' + item + '</option>');
                                });
                                roomSelect.val(selectedRoomValue);
                                roomSelect.prop('disabled', false);
                            }
                        },
                        error: function () {
                            console.error("Failed to get rooms");
                        },
                        complete: function () {
                            roomSelect.removeClass('spinner');
                        }
                    });
                }).change();

                $(roomSelectId).val(selectedRoomValue);
            }
        });

            <div class="tab-content" id="schedule">
                <h2 class="h3">Schedule</h2>
                @for(a = 0; a < Model.OnCampusSchedules.Count; a++)
                {
                    @if (Model.OnCampusSchedules[a].IsDeleted)
                    {
                        <input type="hidden" asp-for="OnCampusSchedules[a].IsDeleted" value="true" />
                    }
                    else
                    {
                            <div class="col">
                                <div class="form-group">
                                    <span asp-validation-for="OnCampusSchedules[a].StartTime"></span>
                                    <label asp-for="OnCampusSchedules[a].StartTime" class="font-weight-bold">Start Time: <span class="required" aria-hidden="true">*</span></label>
                                    <input asp-for="OnCampusSchedules[a].StartTime" type="time" aria-required="true" class="form-control" required />
                                </div>
                            </div>

                            <div class="col">
                                <div class="form-group">
                                    <span asp-validation-for="OnCampusSchedules[a].EndTime"></span>
                                    <label asp-for="OnCampusSchedules[a].EndTime" class="font-weight-bold">End Time: <span class="required" aria-hidden="true">*</span></label>
                                    <input asp-for="OnCampusSchedules[a].EndTime" type="time" aria-required="true" class="form-control" required />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <span asp-validation-for="OnCampusSchedules[a].Building"></span>
                                    <label asp-for="OnCampusSchedules[a].Building" class="font-weight-bold">Building: <span class="required" aria-hidden="true">*</span></label>
                                    <select asp-for="OnCampusSchedules[a].Building" asp-items="Model.Buildings" id="BuildingSelect_@a" aria-required="true" class="form-control" required></select>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <span asp-validation-for="OnCampusSchedules[a].Room"></span>
                                    <label asp-for="OnCampusSchedules[a].Room" class="font-weight-bold">Room: <span class="required" aria-hidden="true">*</span></label>
                                    <select asp-for="OnCampusSchedules[a].Room" asp-items="Model.Rooms" id="RoomSelect_@a" aria-required="true" class="form-control"></select>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <button class="btn btn-danger @(Model.OnCampusSchedules.Where(a => !a.IsDeleted).Count() == 1 ? "d-none" : "")"
                                    formnovalidate type="submit" id="delbutton[@a]"
                                    asp-action="Delete" asp-controller="External" asp-all-route-data="@(new Dictionary<string, string> { { "Id", a.ToString() } })">
                                Delete Schedule
                            </button>
                        </div>

                        <hr />
                    }
                }


            <div class="text-right">
                <button class="btn btn-success" formnovalidate type="submit" id="addbutton" asp-action="Add" asp-controller="External">
                    Add Schedule 
                </button>
            </div>

            <div class="form-row">
                <div class="col-sm-6 offset-sm-3 col-md-4 offset-md-4">
                    <div class="form-group mt-3">
                        <button id="Submit" type="submit" class="btn btn-sm btn-block btn-secondary">Submit</button>
                    </div>
                </div>
            </div>
            </div>
        </form>
    </div> 
</div>

        public IActionResult Add(ExternalForm externalForm)
        {
            externalForm.OnCampusSchedules.Add(new OnCampusSchedule(_processUser));

            return View("Index", externalForm);
        }

Answer 1

当表单中有一个按钮时，单击时将提交表单。你需要防止这种情况发生。在按钮事件处理程序中添加以下内容：

e.preventDefault();