動態填充表格每一行的下拉列表

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);
}