Question

我正在使用SELECT选项动态添加新行并删除新行。动态行添加和删除有效但下拉菜单似乎在添加新行时不显示JSON数组。只有前两个静态下拉菜单显示JSON数组选项。任何人都可以帮助确定我的代码的哪一部分是错的？以下是我的代码和屏幕截图：

JavaScript的：

<script>
/////////////////ADD and DELETE ROWS///////////////


/************add new row dymnically******************/
$(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'">'+
           '<td>'+
                    '<select class="pcode" name="project_code[]" >'+
                    '</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();  
      });  

 });  



 ////////////SHOW JSON DATA ON MULTIPLE DROP DOWN MENU/////////////

    $(".pcode").each(function() {

    $(this).empty();


    $(this).append('<option selected="true" disabled>Choose Project Code</option>');
    $(this).prop('selectedIndex', 0); //Default Selected Option

    const url = 'api_redcap.php'; //JSON Data source

    $.getJSON(url, function (data) {
      $.each(data, function (key, entry) {
        $(".pcode").append($('<option></option>').attr('value', entry.project_code).text(entry.project_code)); // Populate dropdown with list of project code
      })
    });

        });
</script>

HTML 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>

HTML屏幕截图

Answer 1

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

你绑定了select标签但没有为其中的绑定选项编写代码我修改了它，请查看下面的解决方案，让我知道它对你有用吗？

$(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'">'+
           '<td>'+
                    '<select class="pcode" name="project_code[]" >'+
                     bindOption() +'</select>'+
           '</td>'+                                                            
           '<td><button type="button" name="remove" id="'+i+'" class="btn btn_remove">Delete Row</button></td></tr>');  
      });  

      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
      
        $(".pcode").each(function() {
           $(this).find('option').remove();
           $(this).append(bindOption());
        })

 });  

function bindOption(){
    var options = '<option selected="true" disabled>Choose Project Code</option>';
    var serviceArray= new Array("Living Room","Dining Room","Bedroom(s)","Family Room","Kitchen","Den","Hallway(s)","Ste(s)","Bathroom","Landing(s)");
    for (var i = 0; i < serviceArray.length; i++) {
        options += '<option value="' + serviceArray[i] + '">' + serviceArray[i] + '</option>';
    }
    return options;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

您可以通过

简单地实现这一目标

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

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

2 个答案: