带递增选择器的AJAX/PHP联动下拉框无法显示输出

问题根源 #

你这段代码的核心问题是循环变量i的作用域导致的闭包陷阱：用var声明的i属于函数级作用域，当AJAX的success异步回调执行时，整个循环已经执行完毕，i的值会固定为rowNum，此时$('#dropdownExc'+i)找不到对应的下拉框元素，自然无法渲染选项。

解决方案 #

以下三种方法都可以解决这个问题，按需选择：

方法1：用let替代var（推荐，ES6+支持）

let是块级作用域，每次循环都会创建独立的i变量，回调函数能捕获当前循环的正确索引值：

var rowNum = document.getElementById('rowCount').value;

for (let i = 0; i < rowNum; i++){
    $('#dropdown' + i ).on("change", function () {
        var requestid = $(this).val();
        
        $.ajax({
            type: "POST",
            url: "req-exchange.php",
            data: {req_id:requestid},
            success: function (response) {
                console.log(response);
                $('#dropdownExc'+i).html(response);
            }
        });
    });
}

方法2：立即执行函数（IIFE）创建闭包（兼容旧浏览器）

通过立即执行函数把当前循环的i值封装成独立作用域的变量，避免回调引用到循环结束后的i：

var rowNum = document.getElementById('rowCount').value;

for (var i = 0; i < rowNum; i++){
    (function(currentIndex) {
        $('#dropdown' + currentIndex ).on("change", function () {
            var requestid = $(this).val();
            
            $.ajax({
                type: "POST",
                url: "req-exchange.php",
                data: {req_id:requestid},
                success: function (response) {
                    console.log(response);
                    $('#dropdownExc'+currentIndex).html(response);
                }
            });
        });
    })(i);
}

方法3：利用DOM关系定位（更健壮，动态新增行也适用）

不需要依赖索引，通过当前下拉框的DOM层级关系找到对应的第二列下拉框，这种方式不依赖固定ID的索引，后续动态添加行也能自动生效：

// 用事件委托绑定所有第一列下拉框的change事件
$(document).on('change', '[id^="dropdown"]', function() {
    var requestid = $(this).val();
    // 找到当前行对应的第二列下拉框（假设两个下拉框在同一个<tr>内）
    var $targetDropdown = $(this).closest('tr').find('[id^="dropdownExc"]');
    
    $.ajax({
        type: "POST",
        url: "req-exchange.php",
        data: {req_id:requestid},
        success: function (response) {
            console.log(response);
            $targetDropdown.html(response);
        }
    });
});

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