Значение выпадающего поиска в динамически добавляемых строках

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 для инициализации и выбора выпадающего списка select2, и идентификаторы должны быть уникальными, поэтому он используется только один раз.

Простой способ исправить это без частого обновления кода - добавить индекс и увеличивать его каждый раз, когда вы нажимаете кнопку 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="productid'+i+'".

Я переименовываю селектор на $("#productid"+i).select2({, чтобы выбрать нужный элемент.

Наконец, я добавляю i++; в конце btn_addOrder функция, обеспечивающая автоматическое увеличение i при каждом нажатии кнопки.