select2 给出重复的下拉列表

Question

我正在开发一个 B2B 订购应用程序，并且正在使用简单的选择/下拉菜单来提供要订购的产品，并根据需要使用 jquery 添加其他行 - 所有这些都运行良好。我现在已将 select 更改为 select2 以提供搜索。第一项工作正常，但如果您添加额外的行，它会提供 select2 框以及第一行的只读副本。见下图..

与 select2 下拉菜单相关的代码

@foreach (old('products', ['']) as $index => $oldProduct)
  <tr id="product{{ $index }}">
    <td>
      <select name="StockItem[]" class="select2 form-control mb-3 custom-select" style="width: 100%; height:36px;" >
        <option value="">-- choose product --</option>
          @foreach ($products as $product)
            <option value="{{ $product->id }}"{{ $oldProduct == $product->id ? ' selected' : '' }}>
              {{ $product->StockItemName }} -
                (R {{ !floatval($product->DiscountPercentage) ?
                ( !empty($product->UnitPrice) ? number_format($product->UnitPrice, 2) : number_format($product->SellingPrice, 2) )
                : number_format($product->SellingPrice - (($product->DiscountPercentage / 100) * $product->SellingPrice), 2) }})
            </option>
          @endforeach
        </select>
      </td>
  </tr>
@endforeach

jquery

$(document).ready(function(){
  let row_number = {{ count(old('products', [''])) }};
    $("#add_row").click(function(e){
      e.preventDefault();
      let new_row_number = row_number - 1;
      $('#product' + row_number).html($('#product' + new_row_number).html()).find('td:first-child');
      $('#products_table').append('<tr id="product' + (row_number + 1) + '"></tr>');
      row_number++;
      $('select').select2();
    });
});

我假设我的问题是重新加载 select2 $('select').select2();

如果您保存此表单，则会保存正确的数据，而不会出现任何不必要的重复。

任何帮助将不胜感激

Answer 1

您看到这种行为是因为 select2 插件创建了自己的 html，因此当您使用 .html() 从 tr 获取内容时，您也将获得动态生成的 html。相反，您可以使用 .clone() 克隆您的 tr，然后从这个克隆的 tr 中获取 options 从选择框中并将所有内容附加到新生成的 tr 中。

演示代码：

$(document).ready(function() {
  $(".custom-select").select2();
  let row_number = 1; //just for demo..
  $("#add_row").click(function(e) {
    e.preventDefault();
    var options = $("#products_table tbody tr:first").find("[name='StockItem[]']").html(); //get option inside select..
    var cloned = $("#products_table tbody tr:first").clone() //get whole tr..

    $(cloned).find("td:first").html('<select name="StockItem[]" class="select2 form-control mb-3 custom-select" style="width: 100%; height:36px;">' + options + '</select>') //add option ..
    $(cloned).find("input").val("") //empty input values ..

    $('#products_table tbody').append('<tr id="product' + (row_number + 1) + '">' + $(cloned).html() + '</tr>'); //append whole content
    $('tbody tr:last select').select2(); //intialize your select2
    row_number++;
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<table id="products_table">
  <tbody>
    <tr id="product0">
      <td>
        <select name="StockItem[]" class="select2 form-control mb-3 custom-select" style="width: 100%; height:36px;">
          <option value="">-- choose product --</option>
          <option value="{{ $product->id }}">
            abc
          </option>

        </select>
      </td>
      <td><input type="text" value=""></td>
    </tr>
    <tr id="product1">
      <td>
        <select name="StockItem[]" class="select2 form-control mb-3 custom-select" style="width: 100%; height:36px;">
          <option value="">-- choose product --</option>
          <option value="{{ $product->id }}">
            abc
          </option>

        </select>
      </td>
      <td><input type="text" value=""></td>
    </tr>
  </tbody>
</table>

<button id="add_row">Add</button>