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

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 代码：

<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 截图

标签： javascripthtmljsondropdown

Answer 1

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

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

$(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>