来自 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()" />