如何通过一次返回嵌套列表的AJAX调用实现父子下拉框联动

实现逻辑 #

你只需要把接口返回的全量嵌套数据存在可全局访问的位置，再给父级下拉框绑定值变更事件即可，不需要额外发起AJAX请求，实现步骤如下：

1. 请求接口成功后将全量违规数据持久化存储
2. 监听父级下拉框的选中值变化，匹配对应ID的子违规列表填充到子下拉框

完整实现代码 #

// 存储全量违规数据，你也可以存在DOM元素的data属性中避免全局变量污染
let allViolationData = [];

function populateViolationDropDown() {
    $.ajax({
        type: "POST",
        url: "/controller/getViolations",
        data: "{}",
        dataType: 'json',
        success: function (data) {
            // 存储返回的全量数据
            allViolationData = data;
            // 清空并填充父级违规下拉框
            $('#ViolationID').empty();
            data.forEach(function (e, i) {
                $('#ViolationID').append($('<option></option>').val(e.ViolationID).text(e.Description));
            });
            // 初始化默认选中项对应的子下拉框内容
            refreshSubViolation();
        }
    });
}

// 刷新子违规下拉框方法
function refreshSubViolation() {
    // 获取父下拉框当前选中的违规ID
    const selectedViolationId = parseInt($('#ViolationID').val());
    // 匹配到对应的违规项
    const matchedItem = allViolationData.find(item => item.ViolationID === selectedViolationId);
    // 清空子下拉框，这里的#SubViolationID替换为你实际的子下拉框DOM ID
    $('#SubViolationID').empty();
    // 无匹配数据直接返回
    if (!matchedItem || !matchedItem.SubViolationList) return;
    // 填充子下拉框选项
    matchedItem.SubViolationList.forEach(sub => {
        $('#SubViolationID').append($('<option></option>').val(sub.SubViolationID).text(sub.Description));
    });
}

// 绑定父下拉框值变更事件，切换选项时自动刷新子下拉框
$(function() {
    $('#ViolationID').on('change', refreshSubViolation);
});

补充说明 #

父下拉框初始加载完成后会自动触发一次子下拉框填充，保证默认选中的父选项对应的子列表也能正常渲染，后续切换父选项都会自动从已缓存的全量数据中取数联动，不需要重复调用接口。

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