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

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

和我的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 = ""; $("#tblItemList tbody").append( rowToInsert+ ""+ ""+ ""+ ""+ ""+ "
0.00
"+ ""+ "x"+ ""); 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 = ""; html += "
"; html += product.itemName ; html += "
"; return html; } function productFormatSelection(product) { var selected = ""; return selected + product.itemName; } $(".qty, .price").bind("keyup change", calculate); }; 

这里有一些截图：

第一州：

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

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

可能是什么问题？

Answer 1

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

最好在页面中包含唯一ID。

Answer 2

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

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

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

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

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

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