Javascript 动态添加新行时，下拉菜单不显示JSON数组

我正在使用SELECT选项动态添加新行和删除新行。动态行添加和删除可以工作，但在添加新行时，下拉菜单似乎没有显示JSON数组。只有前两个静态下拉菜单显示JSON数组选项。有人能帮我找出我代码的哪一部分是错的吗？以下是我的代码和屏幕截图：

JavaScript:

HTML代码：

HTML截图

---

@例如，我使用静态数组，您可以使用我的bindpoption函数进行json调用，并从您的服务调用中获取数据

您绑定了select标签，但里面没有为绑定选项编写的代码。我修改了它，请查看下面的解决方案，让我知道它是否适合您

$document.readyfunction{ var i=1； $'add'。单击函数{ i++； $'dynamic_field'。追加+ + + 绑定选项++ + “删除行”； }; $document.on'click'，'btn_remove'，函数{ var button_id=$this.attrid； $'row'+按钮id+。删除； }; $.pcode.eachfunction{ $this.find'option'。删除； $this.appendbind选项； } }; 函数绑定选项{ 变量选项='选择项目代码'； var serviceArray=新阵列客厅、餐厅、卧室、家庭室、厨房、书房、走廊、车站、浴室、楼梯平台； 对于变量i=0；i你可以简单地通过以下方法实现这一点

 $(document).ready(function () {
 const url = 'api_redcap.php'; //JSON Data source
 function getOptionsHtml() {
     var html = '<option selected="true" disabled>Choose Project Code</option>';
     $.getJSON(url, function (data) {
         $.each(data, function (key, entry) {
             html += '<option value="' + entry.project_code + '">' + entry.project_code + '</option>';
         })
     });
     return html;
 }
 var opionsHtml = getOptionsHtml();
 var i = 1;
 $('#add').click(function () {
     i++;
     $('#dynamic_field').append('<tr id="row' + i + '">' +
         '<td>' +
         '<select class="pcode" name="project_code[]" >' +
         opionsHtml+
         '</select>' +
         '</td>' +
         '<td><button type="button" name="remove" id="' + i + '" class="btn btn_remove">Delete Row</button></td></tr>');
 });

 /**************Remove row****************/
 $(document).on('click', '.btn_remove', function () {
     var button_id = $(this).attr("id");
     $('#row' + button_id + '').remove();
 });

 $(".pcode").each(function () {
     $(this).empty();
     $(this).append(opionsHtml);
 });
});

---

由于在将select附加到DOM之前调用了json load函数，因此没有填充select。因此，另一种方法是在$document.ready中调用函数，在select被附加到DOM之后用数据填充它。这不起作用。SELECT仅显示Choose项目代码，而不显示json数组。请共享您的json数据，谢谢。您使用的是静态的，但如何将JSON数组插入到bindoption函数中？在bindoption函数中，调用$.getJSONurl，函数数据{$.eachdata，函数键，条目{$.pcode.append$.attr'value'，entry.project\u code.textentry.project\u code；//用项目代码列表填充下拉列表}；方法使用函数bindpoption{var options='Choose Project Code'；$.getJSONurl，函数数据{$.eachdata，函数键，条目{options+=+entry.Project_Code+；}}返回选项；}欢迎您：

<form action="" method="post">
    <table id="dynamic_field">

        <tr>
            <td>
            <select class="pcode" name="project_code[]">
            </select>
            </td>
            <td>
            </td>
        </tr>

        <tr>
            <td>    
            <select class="pcode" name="project_code[]">
            </select>
            </td>
            <td>
            <button type="button" name="add" id="add">Add Row</button>
            </td>
        </tr>

    </table>

    <input type="submit" name="submit" value="submit">
    </form>

 $(document).ready(function () {
 const url = 'api_redcap.php'; //JSON Data source
 function getOptionsHtml() {
     var html = '<option selected="true" disabled>Choose Project Code</option>';
     $.getJSON(url, function (data) {
         $.each(data, function (key, entry) {
             html += '<option value="' + entry.project_code + '">' + entry.project_code + '</option>';
         })
     });
     return html;
 }
 var opionsHtml = getOptionsHtml();
 var i = 1;
 $('#add').click(function () {
     i++;
     $('#dynamic_field').append('<tr id="row' + i + '">' +
         '<td>' +
         '<select class="pcode" name="project_code[]" >' +
         opionsHtml+
         '</select>' +
         '</td>' +
         '<td><button type="button" name="remove" id="' + i + '" class="btn btn_remove">Delete Row</button></td></tr>');
 });

 /**************Remove row****************/
 $(document).on('click', '.btn_remove', function () {
     var button_id = $(this).attr("id");
     $('#row' + button_id + '').remove();
 });

 $(".pcode").each(function () {
     $(this).empty();
     $(this).append(opionsHtml);
 });
});