如何添加動態更改輸入值

Question

我有問題。 我使用jquery在php中進行動態輸入，如下所示：

 $(document).ready(function() { var count = 0; $("#add_btn").click(function(){ count += 1; $('#container').append( '<tr class="records">' + '<td ><div id="'+count+'">' + count + '</div></td>' + '<td><select class="form-control form-control-sm" name="site' + count + '" required><option value="">Input Item</option><option value="canon">canon</option><option value="nikon">nikon</option><option value="fuji">fuji</option></select></td>' + '<td><input name="codeitem' + count + '" type="text"></td>' + '<td><a class="remove_item" href="#" >Delete</a>' + '<input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="hidden"></td>' + '</tr>' ); }); $(".remove_item").live('click', function (ev) { if (ev.type == 'click') { $(this).parents(".records").fadeOut(); $(this).parents(".records").remove(); } }); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="id_form" action="save.php" method="post"> <table> <tr> <td> <input type="button" name="add_btn" value="Add" id="add_btn"> </td> </tr> <tr> <td>No</td> <td>Item</td> <td>Code Item</td> <td>&nbsp;</td> </tr> <tbody id="container"> <!-- nanti rows nya muncul di sini --> </tbody> <tr> <td> <input type="submit" name=submit value="Save"> </td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </form> 

條件：如果我在組合選擇菜單中選擇了canon，那么在輸入codeitem顯示項目的代碼（在另一種情況下，我使用PHP從SQL表中獲取codeitem。

在第一行輸入字段，這是成功的..但是，如果我想添加更多輸入字段，點擊“添加按鈕”以輸入另一個項目（在第二行輸入字段），為什么首先輸入codeitem更改代碼項，而不是輸入codeitem at第二排？

如何輸入具有該條件的動態項目？

Answer 1

如果您沒有使用遺留代碼庫，那么使用最新版本的Jquery就好了。

• '<td ><div id="'+count+'">' + count + '</div></td>' ，您不能在多個時間內使用相同的id ，因此請將其更改為class。
• '<td><input name="codeitem' + count + '" type="text"></td>' ，輸入字段名稱應該修復，以便在表單提交后在php腳本中處理它，但是你需要獲得多個值，使其成為數組codeitem[]
• rows[]輸入字段有什么用？
• 要在更改組合選擇菜單上動態輸入codeitem，您必須使用“Ajax”從數據庫中獲取所選組合菜單的“codeitem”值。

檢查此jsfiddle 。

$(document).ready(function() {

    $("#add_btn").click(function(){
        let count = $('tr.records').length+1;
        $('#container').append(
             '<tr class="records">'
                 + '<td ><div class="count">' + count + '</div></td>'
                 + '<td><select class="site form-control form-control-sm" name="site[]" required><option value="">Input Item</option><option value="canon">canon</option><option value="nikon">nikon</option><option value="fuji">fuji</option></select></td>'

                 + '<td><input class="codeitem" name="codeitem[]" type="text"></td>'
                 + '<td><a class="remove_item" href="#" >Delete</a>'
                 + '<input class="rows" name="rows[]" value="'+ count +'" type="hidden"></td>'
             + '</tr>'
            );
        });

$(document).on('click',".remove_item", function (ev) {

  $(this).parents(".records").fadeOut();
  $(this).parents(".records").remove();

  //Re-arrange the Row Serial No

  $('tr.records div.count').each(function(index) {
    $(this).text(index+1)
  });
});

$(document).on('change',".site", function (ev) {

  let site = $(this).val();
        let current = $(this).parents(".records");

  if(site!=''){
    //make an ajax call to get the corresponding CodeItem of the selected site
    /* $.ajax({
      url: "/yoururl",
      data:{"id":site},
      success: function(result){
        $(current).find('.codeitem').val(result);
      }
    }); */

  }else{
    $(current).find('.codeitem').val('');
  }


}); 
})