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

Question

你好！

我正在做一个动态表格，可以添加/删除行，使用select2通过ajax从数据库中搜索项目，目前它工作得很好，然后我想在我的select2输入框中添加另一个按钮 ("添加新项目")。它也有效，但是当我添加另一行时，以前的行将在其上有2个（添加新项）按钮，当我再添加一行时，我的输入框中会发生奇怪的事情。

1. 没有添加新行

2. 添加新行后

这是我的代码：

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

请帮我找到解决这个问题的方法，我一直在尝试自己解决，但是无法让它正常工作。任何建议、答案和评论都将不胜感激。非常感谢，祝你有一个愉快的一天！

- melvnberd

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>";
        }

- melvnberd