javascript - 动态填充表格每一行的下拉菜单

Question

我有一个包含 n 行的表，具体取决于结果。页面顶部有一个下拉菜单。根据该下拉列表的选择，我希望基于 xhttp.response，使用自己的下拉列表动态填充每行上的列。

这是我到目前为止所拥有的:

function getJobs(taskID){

        var xhttp = new XMLHttpRequest();
        var url = "dynamicdd.php";
        var data = new FormData();
        data.append('taskID', taskID);
        xhttp.open('POST', url, true);
        xhttp.send(data);
        $('#cTable tr').each(function(){
            xhttp.onreadystatechange = function() {
                if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("testSelect").innerHTML = xhttp.responseText;
                    }
                }
            });
        }

我能够成功更改第一行，但后续行却不能。我尝试用 $(this).find(select:eq(0)).html() 代替 document.getElementById() 但没有运气。我觉得我很接近，但缺乏 jquery/javascript 方面的专业知识。感谢您的帮助。

Answer 1

您正在为每个表行重新分配 onreadystatechange 函数，这是错误的，

首先评估该函数必须执行的操作，然后发送请求然后等待响应准备好然后寻找您想要的元素并将元素 html 替换为响应文本，如下所示，

function getJobs(taskID){

    var xhttp = new XMLHttpRequest();
    var url = "dynamicdd.php";
    var data = new FormData();
        data.append('taskID', taskID);
    xhttp.open('POST', url, true);
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            $('#cTable tr').each(function(index, element){
                $(element).find('#testSelect').html(xhttp.responseText);     
            }
        }
    });
    xhttp.send(data);
}