如何将Button添加到动态表格上的select2下拉菜单上

Question

美好的一天！

我正在做一个动态表，你可以添加/删除行，而我使用select2通过ajax搜索数据库上的项目，此刻它运行良好，然后我想添加另一个按钮（“添加新项目” ）到我的select2的输入框。它也在工作，但是当我添加另一行时，以前的行将有2个（添加新项目）按钮，并且当我添加另一行时，我的输入框上发生了一些奇怪的事情。

1. 无需添加新行

这里后添加新行

是我的代码：

$(document).ready(function() { 
    addRow(); 
}); 

addRow.js

var rowCount = document.getElementById('tblItemList').rows.length - 1 ; 
var rowArrayId = rowCount ; 

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 id='itemId"+rowArrayId+"' 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>"); 

var rowId = "#itemId"+rowArrayId; 

$(rowId).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}; 
     } 
    } 
}); 

rowArrayId = rowArrayId + 1; 
    }; 

$(".select2-drop").append('<table width="100%"><tr><td class="row"><button class="btn btn-block btn-default btn-xs" onClick="modal()">Add new Item</button></div></td></tr></table>'); 



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

在我来说，我只是说这个功能

formatNoMatches: function(term) { 

      $('.select2-input').on('keyup', function(e) { 
      if(e.keyCode === 13) 
       { 
       $("#modalAdd").modal();   
       $(".select2-input").unbind("keyup"); 
       } 
      }); 

     return "<li class='select2-no-results'>"+"No results found.<button class='btn btn-success pull-right btn-xs' onClick='modal()'>Add New Item</button></li>"; 
     }