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

Posted 2023-05-07

【中文标题】动态添加行中的可搜索下拉值

【英文标题】：Searchable Dropdown value in Dynamically added rows

【发布时间】：2020-06-01 12:25:17

【问题描述】：

我使用 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(); 
      );

【参考方案1】：

问题在于您使用 id 来初始化和选择您的 select2 可搜索下拉菜单，并且 id 应该是唯一的，因此它只使用一次。

在不更新代码的情况下解决此问题的一种简单方法是添加一个索引并在每次单击btn_addOrder 按钮时递增它。然后您可以将此索引附加到您的选择器，它会起作用。

您的代码将如下所示：

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+'"。

我将选择器重命名为 $("#productid"+i).select2( 以选择正确的项目。

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