级联下拉框AJAX循环调用异常问题求助

1. AJAX重复提交：每次新增输入组后重复绑定change事件，导致单个楼宇下拉框触发多次AJAX请求，覆盖已选值；或添加按钮触发了页面整页刷新，重新初始化时未保留原有选中状态。
2. 联动仅影响第二组：所有房间下拉框使用了相同的选择器（如固定ID），或联动逻辑中未定位到当前触发事件的楼宇下拉框对应的房间下拉框，默认操作了页面中第二个匹配元素。

1. 改用事件委托绑定联动逻辑，避免重复绑定 #

放弃直接给.building-select绑定change事件，改用事件委托绑定到父容器上，确保动态新增的元素也能触发事件，且不会重复绑定：

// 假设所有输入组都放在id为room-container的容器内
$('#room-container').on('change', '.building-select', function() {
    const $this = $(this);
    const buildingId = $this.val();
    // 找到当前组对应的房间下拉框
    const $roomSelect = $this.closest('.input-group').find('.room-select');
    
    // 禁用房间下拉框防止重复请求
    $roomSelect.prop('disabled', true).empty().append('<option value="">加载中...</option>');
    
    if (!buildingId) {
        $roomSelect.empty().append('<option value="">请先选择楼宇</option>').prop('disabled', false);
        return;
    }

    $.ajax({
        url: '@Url.Action("GetRoomsByBuildingId")', // 后端获取房间的接口
        type: 'GET',
        data: { buildingId: buildingId },
        success: function(data) {
            $roomSelect.empty().append('<option value="">请选择房间</option>');
            $.each(data, function(index, item) {
                // 保留原有选中值（如果有）
                const selected = item.Id === $roomSelect.data('selectedId') ? 'selected' : '';
                $roomSelect.append(`<option value="${item.Id}" ${selected}>${item.Name}</option>`);
            });
            $roomSelect.prop('disabled', false);
        },
        error: function() {
            $roomSelect.empty().append('<option value="">加载失败，请重试</option>').prop('disabled', false);
        }
    });
});

2. 给每组输入项添加独立标识，确保联动精准 #

在Razor视图中，确保每组楼宇和房间下拉框属于同一个容器，并且动态新增时复制相同结构：

<div id="room-container">
    <!-- 初始输入组 -->
    <div class="input-group mb-3">
        <select class="form-control building-select" name="Buildings[0].Id">
            <option value="">请选择楼宇</option>
            @foreach (var building in Model.BuildingList)
            {
                <option value="@building.Id" @(Model.SelectedBuildings[0]?.Id == building.Id ? "selected" : "")>@building.Name</option>
            }
        </select>
        <select class="form-control room-select" name="Rooms[0].Id" data-selected-id="@Model.SelectedRooms[0]?.Id">
            <option value="">请选择房间</option>
            @foreach (var room in Model.RoomList.Where(r => r.BuildingId == Model.SelectedBuildings[0]?.Id))
            {
                <option value="@room.Id" @(Model.SelectedRooms[0]?.Id == room.Id ? "selected" : "")>@room.Name</option>
            }
        </select>
    </div>
</div>

<button id="add-group-btn" type="button" class="btn btn-primary">添加楼宇房间</button>

3. 动态新增输入组时，避免页面重载，保留选中状态 #

修改添加按钮的逻辑，用JS动态克隆/生成新的输入组，而不是提交表单刷新页面：

$('#add-group-btn').click(function() {
    const container = $('#room-container');
    const groupCount = container.children('.input-group').length;
    // 克隆初始组并清空选中值，修改name属性的索引
    const newGroup = container.children('.input-group:first').clone();
    
    // 重置楼宇下拉框
    newGroup.find('.building-select')
        .val('')
        .attr('name', `Buildings[${groupCount}].Id`);
    
    // 重置房间下拉框
    newGroup.find('.room-select')
        .empty().append('<option value="">请先选择楼宇</option>')
        .attr('name', `Rooms[${groupCount}].Id`)
        .removeData('selectedId');
    
    container.append(newGroup);
});

4. 后端接口优化（确保返回正确格式） #

后端GetRoomsByBuildingId方法需返回JSON格式的房间列表，无需返回页面内容：

public IActionResult GetRoomsByBuildingId(int buildingId)
{
    var rooms = _roomService.GetRoomsByBuildingId(buildingId);
    return Json(rooms.Select(r => new { Id = r.Id, Name = r.Name }));
}

关键注意点 #

• 禁止给添加按钮设置type="submit"，避免触发表单提交导致页面刷新；
• 所有动态生成的表单元素name属性需按索引递增（如Buildings[0].Id、Buildings[1].Id），确保后端能正确绑定到集合；
• AJAX请求中需禁用房间下拉框防止重复提交，请求完成后恢复可用状态；
• 每次加载房间时，通过data-selected-id保留当前组的房间选中值，避免丢失。

内容的提问来源于stack exchange，提问作者littlelion111