JSON填充的下拉数据存在问题

Question

我成功地从json收集了数据并将其嵌入到我的下拉列表中，但是，有时数据没有加载到我的下拉列表中。 它将附加到另一个下拉列表（相同的类，相同的数据，不同的ID）。 当我多次快速单击添加行按钮（将在下拉列表中添加行）时，将根本不会填充数据。 它显示空的下拉列表。

function getEprIdList() {
var url, listData;
url = 'http://localhost:41251/api/GetEpridList';

$.getJSON(url, function (data) {
    $(data).each(function () {

        //prolist is the td that contain the dropdown
        $("#ProList" + countE).empty();
        countE = 0;
        option = $("<option></option>");
        option.val(this.epridName);
        option.append(this.epridName);

        //This to set which Project
        //.pro is class of the select dropdown
        $('.pro').each(function () {
            parentName = $(this).closest('table').attr('id');
            var parent = $(this).closest('table');

            $(data).each(function () {
                $("#ProList" + countE, parent).append(option);
                countE++;
            })
        });
    });
    return false;
});
}

谁能告诉我这段代码我做错了什么？ 谢谢

*下拉列表存在于动态表中，如果添加行，则将添加带有下拉列表的新行。 具有动态ID。

*我添加包含此代码中的下拉列表的行

function addtask(element) {

    var name = $(element).closest('tbody').attr('id');
    var tb = document.getElementById(name);

    var tr = document.createElement('tr');
    tr.setAttribute("id", "Task1");
    tr.setAttribute("class", "val");
    tb.appendChild(tr);

    // Add item in Task Row
    var cell = tr.insertCell(0);
    cell.innerHTML = "<select id=\"taskDdown" + taskCnt + "\" class=\"task\" name=\"taskName\"><option value=\"\" disabled selected hidden>Select Activity</option></select>" +
    "<span style=\"color:#333333;\" class=\"icon-grommet-trash icon\" onclick=\"deletetask(this)\"/>";

    //Array for Days
    var day = ['null', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'ToT'];

    for (i = 1; i < 8; i++) {
        var cell = tr.insertCell(i);
        for (d = 1; d < day.length; d++) {
            var dt = day[i];
            cell.innerHTML = "<input type=\"text\" name=\"" + dt + "\" onkeypress=\"return event.charCode >= 48 && event.charCode <= 57\" class=\"a hour focus\" onchange=\"deci(this)\" value=\"0.00\">";
        }
    }
    var c9 = tr.insertCell(8);
    c9.setAttribute("class", "tot");
    c9.setAttribute("name", "taskTotHour");
    c9.innerHTML = "0.00";

    $(".focus").on("click", function () {
        $(this).select();
    });

    getTaskList();
}

Answer 1

想法是在其旁边添加一行以及相关的下拉列表。 此示例在此处创建行以及相应的下拉列表，然后将其追加到表中。 您可以在tr上展开，根据需要选择属性，这只是骨骼结构。

  function addRow() { var root = 'https://jsonplaceholder.typicode.com/users'; $.ajax({ url: root, method: 'GET' }).then(function(data) { var select = $('<select/>');//new select var tr = $('<tr/>') // new row //add all options from your api $.each(data, function(i, item) { var option = $('<option/>').val(item.email).text(item.email); $(select).append(option); //append option to the select element }) $(tr).append(select);//append the select item to th row $('#abc').append(tr);//append the new row to the table }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="abc"> </table> <input type='button' value="add" onclick="addRow()" />