Probleme mit bevölkerten Dropdown-Daten von JSON

Question

Ich sammle erfolgreich Daten von JSON und eingebettet in meine Dropdown-Liste, aber manchmal die Daten nicht geladen in meinem Dropdown. Es wird an ein anderes Dropdown angehängt (gleiche Klasse, gleiche Daten, andere ID). Wenn ich mehrmals schnell auf die Schaltfläche "Zeile hinzufügen" geklickt habe (fügt eine Zeile mit der Dropdown-Liste hinzu), werden die Daten überhaupt nicht ausgefüllt. Es zeigt leeres Dropdown.

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

Kann mir bitte jemand sagen, was ich in diesem Code falsch mache? Danke

* Das Dropdown in der dynamischen Tabelle existiert, wenn wir Zeile hinzufügen, dann werden wir neue Zeile mit Dropdown hinzufügen. die haben dynamische ID.

* i hinzufügen Zeile, die das Drop-down in diesem Code enthalten

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

Die Idee ist, eine Zeile und auch die dazugehörige Dropdown neben ihm hinzuzufügen. In diesem Beispiel wird die Zeile und das entsprechende Dropdown erstellt und anschließend an die Tabelle angehängt. Sie können auf die tr erweitern, Attribute so oft wie nötig auswählen, dies ist nur Skelettstruktur.

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