Javascript 使用select2 ajax添加新字段时,先前字段文本消失
我在输入框中使用select2插件,根据用户键入的内容使用AJAX从数据库中搜索项目。它工作得很好,我可以搜索其中的项目,并在可用时选择它,但我的问题是,每当我在表中添加新行时,以前的项目字段“文本”将消失,我正在制作一个表,您可以在其中动态添加/删除行,因此这是我的HTML:Javascript 使用select2 ajax添加新字段时,先前字段文本消失,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我在输入框中使用select2插件,根据用户键入的内容使用AJAX从数据库中搜索项目。它工作得很好,我可以搜索其中的项目,并在可用时选择它,但我的问题是,每当我在表中添加新行时,以前的项目字段“文本”将消失,我正在制作一个表,您可以在其中动态添加/删除行,因此这是我的HTML: <td><input name='product[0][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='
<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);
};
函数addRow(){
var tobeaded=document.getElementById('tobeaded').value;
如果(TOBEADED=='')
{tobeaded=2;}
否则,如果(标题>10)
{
tobeaded=10;
}
对于(变量i=0;i
以下是一些屏幕截图:
第一州:
第二种状态:在输入框中搜索项目时
第三种状态:在我的表上添加新行后
有什么问题吗?我猜每次调用.select2(),所有选择都会重置为原始状态。您只能通过限制作用域在新框上调用构造函数 要仅更新新的Select2,您应更改以下内容。 参见此示例(未测试,请调整):
添加行时,输入元素使用相同的id值
最好在页面中具有唯一的id。添加行时,输入元素使用相同的id值,这可能是造成此问题的原因。如果不是的话,你最好看看它,因为id值在页面中应该是唯一的。是的@melc可能是它造成了问题,谢谢你分享你的想法,我试试看。:)谢谢@melc是同一个Id导致了这个问题,我尝试在我添加的元素上添加一个动态Id,然后在我的select2上使用它作为选择器,现在它工作正常!非常感谢DHi@melvnberd你能发布你的更新代码吗?我也遇到了同样的问题,但我尝试过的一些方法不起作用。谢谢@Dragony,我在这一个上使用了一个input type=“text”,因为它不允许对元素使用ajax方法。啊,我一定错过了。但我想第二种选择是你最好的选择。我将用一个例子更新我的答案。我现在已经让它工作了,在我添加的元素上添加了一个唯一的id,并使用生成的id作为select2的选择器,解决了这个问题。:)我不确定这是不是最好的方法。无论如何,谢谢你的建议和努力!这对我也很有帮助。事实上,我在上面的代码中使用了类作为选择器。:)所以现在我把它改成了一个唯一的ID!谢谢
var newHtml = $("<h1>Code to be appended here</h1>");
newHtml.appendTo('#tblItemList tbody');
$('.itemSearch', newHtml).select2(/* ... */)
$('.itemSearch').each(function(){
var val = $(this).val();
$(this).find('option[value='+val+']').attr('selected', 'selected');
})