时间戳

首页 > 解决方案 > 动态添加的行中的可搜索下拉值

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

问题描述

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

标签： phpjquerymysqlajaxjquery-select2

解决方案

问题在于您使用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({选择正确的项目。

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

推荐阅读