选择2给出了重复的下拉列表

问题描述

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

与selt2下拉菜单相关的代码

@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();
    });
});

我想我的问题是重新加载了selt2$('select').select2();

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

如有任何帮助，我们将不胜感激

推荐答案

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

演示代码：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

$(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/[email protected]/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>