使用 select2 ajax 添加新字段时，以前的字段文本会消失

Question

我在输入框中使用 select2 插件，根据用户在其上输入的内容使用 AJAX 从数据库中搜索项目。它工作正常，我可以在上面搜索项目并在可用时选择它，但我的问题是每当我在表上添加新行时，以前的项目字段“文本”都会消失，我正在制作一个你可以的表动态添加/删除行，所以这是我的 HTML：

<td><input name='product[0][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' /></td>

还有我的javascript：

function addRow(){
var toBeAdded = document.getElementById('toBeAdded').value;
if (toBeAdded=='')
    { toBeAdded = 2; }
else if(toBeAdded>10)
{
  toBeAdded = 10;
}

  for (var i = 0; i < toBeAdded; i++) {
    var rowToInsert = '';

     rowToInsert = "<tr><td><input name='product["+rowArrayId+"][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' /></td>";
    $("#tblItemList tbody").append(
        rowToInsert+
        "<td><textarea readonly name='product["+rowArrayId+"][description]' class='form-control description' rows='1' ></textarea></td>"+
        "<input type='hidden' name='product[" + rowArrayId + "][itemId]' id='itemId'>"+
        "<td><input type='number' min='1' max='9999' name='product["+rowArrayId+"][quantity]' class='qty form-control' required />"+
        "<input id='poItemId' type='hidden' name='product[" + rowArrayId + "][poContentId]'></td>"+
        "<td><input type='number' min='1' step='any' max='9999' name='product["+rowArrayId+"][price]' class='price form-control' required /></td>"+
        "<td class='subtotal'><center><h3>0.00</h3></center></td>"+
        "<input type='hidden' name='product["+rowArrayId+"][delete]' class='hidden-deleted-id'>"+
        "<td class='actions'><a href='#' class='btnRemoveRow btn btn-danger'>x</a></td>"+
        "</tr>");

        rowArrayId = rowArrayId + 1;
     };


 $(".itemSearch").select2({
    placeholder: 'Select a product',
    formatResult: productFormatResult,
    formatSelection: productFormatSelection,
    dropdownClass: 'bigdrop',
    escapeMarkup: function(m) { return m; },
    minimumInputLength:1,
    ajax: {
        url: '/api/productSearch',
        dataType: 'json',
        data: function(term, page) {
            return {
                q: term
            };  
        },  
        results: function(data, page) {
            return {results:data};
        }   
    }   
});


function productFormatResult(product) {
var html = "<table><tr>";
 html += "<td>";
html += product.itemName ;
html += "</td></tr></table>";
return html;
}

  function productFormatSelection(product) {
  var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>";
  return selected + product.itemName;
 }

 $(".qty, .price").bind("keyup change", calculate);
 };

这里有一些截图：

第一个状态：

第二状态：在输入框上搜索项目时

第三种状态：在我的表上添加新行后

可能是什么问题？

Answer 1

添加行时，输入元素使用相同的 id 值。

页面内最好有唯一的id。

Answer 2

我猜每次调用 .select2() 时，所有选择都会重置为原始状态。你只能通过限制范围来调用新盒子上的构造函数。

要仅更新新的 select2s，您应该更改以下内容。 看这个例子（未经测试，请调整）：

var newHtml = $("<h1>Code to be appended here</h1>");
newHtml.appendTo('#tblItemList tbody');
$('.itemSearch', newHtml).select2(/* ... */)

作为替代方法，您可以在调用构造函数之前通过将“selected”属性应用于所有框来尝试“冻结”状态。

看这个例子（未经测试，请调整）

$('.itemSearch').each(function(){
    var val = $(this).val();
    $(this).find('option[value='+val+']').attr('selected', 'selected');
})