动态DataTable中基于MySQL的二级联动下拉框加载问题求助

我帮你梳理下问题所在，然后直接给出修正后的方案：

核心问题分析 #

你当前的代码存在几个关键问题：

• 事件绑定逻辑搞反了：你给#L2绑定了change事件，但实际应该监听L1的变化来触发L2的选项加载
• 动态元素事件绑定失效：如果L1是从数据库动态生成的（而非手动写死的选项），直接用$("#L1").change()会因为元素还未创建而绑定失败
• 重复ID冲突：DataTable中同时编辑多行时，多个#L1/#L2会导致选择器出错，应该用class替代id
• 未设置初始选中状态：编辑行时没有把原有数据设置为下拉框的选中项，且初始化时没有自动加载对应L2数据

修正后的代码 #

function editRow(oTable, nRow) {
    var aData = oTable.fnGetData(nRow);
    var jqTds = $('>td', nRow);
    
    // 文本输入框保留原逻辑
    jqTds[0].innerHTML = '<input type="text" class="form-control" value="' + aData[0] + '">';
    
    // 生成L1下拉框（改用class避免ID冲突，同时设置初始选中值）
    let l1Html = '<select class="form-control L1"><option value="0">- Select -</option>';
    // 这里如果是从数据库动态加载L1选项，替换成你的AJAX获取逻辑即可
    const l1Options = [
        {value: "1", text: "Finance"},
        {value: "2", text: "IT"},
        {value: "3", text: "Marketing"},
        {value: "4", text: "Operational"},
        {value: "5", text: "Sales"},
        {value: "6", text: "Staff"}
    ];
    l1Options.forEach(opt => {
        const selected = opt.value === aData[1] ? 'selected' : '';
        l1Html += `<option value="${opt.value}" ${selected}>${opt.text}</option>`;
    });
    l1Html += '</select>';
    jqTds[1].innerHTML = l1Html;
    
    // 生成L2下拉框（同样改用class）
    jqTds[2].innerHTML = '<select class="form-control L2"></select>';
    
    // 替换编辑按钮
    jqTds[3].innerHTML = '<a class="save-row" href="">Enregistrer</a>';
    jqTds[4].innerHTML = '<a class="cancel-row" href="">Annuler</a>';
    
    // 获取当前行的L1和L2元素（避免全局选择器影响其他行）
    const $currentL1 = $(nRow).find('.L1');
    const $currentL2 = $(nRow).find('.L2');
    
    // 封装L2加载函数，复用初始化和变更场景
    function loadL2(deptId) {
        $.ajax({
            url: 'getUsers.php',
            type: 'post',
            data: {depart: deptId},
            dataType: 'json',
            success: function(response) {
                $currentL2.empty();
                $currentL2.append('<option value="0">- Select -</option>');
                // 遍历生成L2选项，并设置初始选中值
                response.forEach(item => {
                    const selected = item.id == aData[2] ? 'selected' : '';
                    $currentL2.append(`<option value="${item.id}" ${selected}>${item.name}</option>`);
                });
            },
            error: function() {
                // 可选：添加错误提示
                $currentL2.html('<option value="0">加载失败</option>');
            }
        });
    }
    
    // 监听当前行L1的变化事件
    $currentL1.on('change', function() {
        loadL2($(this).val());
    });
    
    // 初始化编辑行时，立即加载对应L2数据
    loadL2($currentL1.val());
}

关键修改说明 #

1. 替换ID为Class：用.L1/.L2替代#L1/#L2，并通过当前行nRow定位元素，彻底解决多编辑行的ID冲突问题
2. 修正事件监听对象：现在监听L1的change事件触发L2加载，逻辑完全符合需求
3. 动态元素事件绑定：在元素生成后直接绑定事件，确保事件能正确触发
4. 初始化加载L2：打开编辑行时自动根据当前L1值加载对应L2数据，无需用户手动触发
5. 设置初始选中状态：生成下拉框时自动选中原有数据，提升编辑体验

额外注意事项 #

• 如果你的L1选项是从数据库动态加载的，把示例中的l1Options替换成你的AJAX获取逻辑即可
• 确保getUsers.php能正确接收depart参数，并返回格式合法的JSON数据
• 测试时可以打开浏览器开发者工具（F12），在Network标签页查看AJAX请求的状态和返回数据，排查问题更高效

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