проблемы с заполненными выпадающими данными из json

Question

Я успешно собираю данные из json и внедряюсь в свой раскрывающийся список, однако иногда данные не загружались в мое раскрывающееся меню. он добавляет к другому выпадающему списку (тот же класс, те же данные, другой идентификатор). Когда я быстро нажал кнопку добавления строки (добавит строку с выпадающим списком), данные не будут заполнены вообще. он показывает пустое раскрывающееся меню.

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

Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно в этом коде? Спасибо

* Выпадающий список существовал в динамической таблице, если добавить строку, то мы добавим новую строку с выпадающим списком. имеют динамический идентификатор.

* я добавить строку, которая содержит выпадающий список в этом коде

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