动态添加行中的可搜索下拉值

Question

我正在使用 php 和简单的 js 在动态添加的行中添加可搜索的下拉列表，我的问题是，当我添加第一行时，可搜索的下拉列表工作正常，但是当我添加另一行时，下拉菜单不起作用...任何人都可以帮我解决这个问题

$(document).ready(function(){
      $(document).on('click','.btn_addOrder', function(){
        var html='';
        html+='<tr>';
        html+='<td><input type="text" class="form-control productname" style="display:none" name="productname[]" readonly></td>';
        html+='<td><input type="text" class="form-control totalcp" style="display:none" name="totalcp[]" readonly></td>';
        html+='<td><input type="text" class="form-control unitcode" style="display:none" name="unitcode[]" readonly></td>';
        html+='<td><input type="hidden" class="form-control productcode" name="productcode[]" readonly></td>';
        html+='<td><select class="form-control productid" name="productid[]" id="productid"  required><option value="0">--Select Product--</option></select></td>';        
        html+='<td><input type="text" class="form-control productstock" name="productstock[]" readonly></td>';
        html+='<td><input type="number"  class="form-control quantity_product" name="quantity[]" required></td>';
        html+='<td><input type="text" class="form-control productsatuan"  name="productsatuan[]" readonly></td>';
        html+='<td><button type="button" name="remove" class="btn btn-danger btn-sm btn-remove"><i class="fa fa-remove"></i></button></td>';

        $('#myStock').append(html);
        $("#productid").select2({
        ajax:{
          url:"prod.php",
          type:"post",
          dataType:"json",
          delay:250,
          data:function(params){     return{   searchTerm:params.term        };      },
          processResults:function(response){   return{       results:response          };    },
          cache:true
          }
        });

        $('.productid').on('change', function(e){
          var productid = this.value;
          var tr=$(this).parent().parent();
          $.ajax({
            url:"getproduct.php",
            method:"post",
            data:{id:productid},
            success:function(data){
              //console.log(data);
              tr.find(".productcode").val(data["product_code"]);
              tr.find(".productname").val(data["product_name"]);
              tr.find(".productstock").val(data["stock"]);
              tr.find(".productsatuan").val(data["nm_satuan"]);
              tr.find(".unitcode").val(data["kd_satuan"]);
              tr.find(".totalcp").val(data["total_cp"]);
              tr.find(".quantity_product").val(0);
             }
          })
        })
      })
      //Remove Row
      $(document).on('click','.btn-remove', function(){
        $(this).closest('tr').remove(); 
      });

Answer 1

问题在于您使用 id 进行初始化并且 select 您的 select2 可搜索下拉列表和 ID 应该是唯一的，因此它只使用一次。

无需大量更新代码即可解决此问题的一种简单方法是添加一个索引并在每次单击 btn_addOrder 按钮时递增它。然后您可以将此索引附加到您的 selector 并且它会起作用。

您的代码将如下所示：

let i=0;
$(document).on('click','.btn_addOrder', function(){
    var html='';
    html+='<tr>';
    html+='<td><input type="text" class="form-control productname" style="display:none" name="productname[]" readonly></td>';
    html+='<td><input type="text" class="form-control totalcp" style="display:none" name="totalcp[]" readonly></td>';
    html+='<td><input type="text" class="form-control unitcode" style="display:none" name="unitcode[]" readonly></td>';
    html+='<td><input type="hidden" class="form-control productcode" name="productcode[]" readonly></td>';
    html+='<td><select class="form-control productid" name="productid[]" id="productid'+i+'"  required><option value="0">--Select Product--</option></select></td>';
    html+='<td><input type="text" class="form-control productstock" name="productstock[]" readonly></td>';
    html+='<td><input type="number"  class="form-control quantity_product" name="quantity[]" required></td>';
    html+='<td><input type="text" class="form-control productsatuan"  name="productsatuan[]" readonly></td>';
    html+='<td><button type="button" name="remove" class="btn btn-danger btn-sm btn-remove"><i class="fa fa-remove"></i></button></td>';

    $('#myStock').append(html);

    $("#productid"+i).select2({
        ajax:{
            url:"prod.php",
            type:"post",
            dataType:"json",
            delay:250,
            data:function(params){     return{   searchTerm:params.term        };      },
            processResults:function(response){   return{       results:response          };    },
            cache:true
            }
        });
    i++;
});

所以我先定义一个变量i=0;

然后在添加下拉列表的 html 行上，我将 id 编辑为 id="productid'+i+'"。

我将 select 或 $("#productid"+i).select2({ 重命名为 select 正确的项目。

最后我在 btn_addOrder 函数的末尾添加了 i++; 以确保每次单击按钮时 i 自动递增。

动态添加行中的可搜索下拉值

Searchable Dropdown value in Dynamically added rows

php

mysql

ajax

jquery

jquery-select2