时间戳

首页 > 解决方案 > 动态填充表格每一行的下拉菜单

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

问题描述

根据结果​​，我有一个包含 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 方面的专业知识。谢谢你的帮助。

标签： javascriptjquery

解决方案

您正在为每个错误的表行重新评估 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);
}

推荐阅读