Select2 不适用于表单中动态添加的行

Question

我在表单表中动态添加行，并在字段中使用 select2 来搜索项目。 select2 在第一行工作正常。但是，在表单中添加另一行后，select2 不起作用。 我的表单代码是： 我该如何解决它，并且根据 select2 可以完美地工作。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />
<form action="" id="invoice-form" method="post" class="invoice-form" role="form" novalidate=""> 
        <div class="load-animate animated fadeInUp">
            <div class="row">
                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                    <h2 class="title">Saif Powertec Ltd</h2>
                    <?php include('menu.php');?>    
                </div>                  
            </div>
            <input id="currency" type="hidden" value="$">
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                    <h3>From,</h3>
                    <?php echo $_SESSION['user']; ?><br>    
                    <?php echo $_SESSION['address']; ?><br> 
                    <?php echo $_SESSION['mobile']; ?><br>
                    <?php echo $_SESSION['email']; ?><br>   
                </div>              
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 pull-right">
                    <h3>To,</h3>
                    <div class="form-group">
                        <input type="text" class="form-control" name="companyName" id="companyName" placeholder="Company Name" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" rows="3" name="address" id="address" placeholder="Your Address"></textarea>
                    </div>
                    
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <table class="table table-bordered table-hover" id="invoiceItem">   
                        <tr>
                            <th width="2%"><input id="checkAll" class="form-control" type="checkbox"></th>
                            <th width="15%">Item No</th>
                            <th width="38%">Item Name</th>
                            <th width="15%">Quantity</th>
                            <th width="15%">Price</th>                              
                            <th width="15%">Total</th>
                        </tr>                           
                        <tr>
                            <td><input class="itemRow" type="checkbox"></td>
                            <td><input type="text" name="productCode[]" id="productCode_1" class="form-control" autocomplete="off"></td>
                            
                            
                            <td><select class="select2 form-control" id="productName_1" name="productName[]"><option value="" selected="selected">Select Item</option><option value="1">pAPER</option><option value="2">KirloskarGREEN</option></select></td>
                            
                            <td><input type="number" name="quantity[]" id="quantity_1" class="form-control quantity" autocomplete="off"></td>
                            <td><input type="number" name="price[]" id="price_1" class="form-control price" autocomplete="off"></td>
                            <td><input type="number" name="total[]" id="total_1" class="form-control total" autocomplete="off"></td>
                        </tr>                       
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                    <button class="btn btn-danger delete" id="removeRows" type="button">- Delete</button>
                    <button class="btn btn-success add_more_item" id="addRows" type="button">+ Add More</button>
                </div>
            </div>
            <div class="row">   
                <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                    <h3>Notes: </h3>
                    <div class="form-group">
                        <textarea class="form-control txt" rows="5" name="notes" id="notes" placeholder="Your Notes"></textarea>
                    </div>
                    <br>
                    <div class="form-group">
                        <input type="hidden" value="<?php echo $_SESSION['userid']; ?>" class="form-control" name="userId">
                        <input data-loading-text="Saving Invoice..." type="submit" name="invoice_btn" value="Save Invoice" class="btn btn-success submit_btn invoice-save-btm">                     
                    </div>
                    
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                    <span class="form-inline">
                        <div class="form-group">
                            <label>Subtotal: &nbsp;</label>
                            <div class="input-group">
                                <div class="input-group-addon currency">$</div>
                                <input value="" type="number" class="form-control" name="subTotal" id="subTotal" placeholder="Subtotal">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Tax Rate: &nbsp;</label>
                            <div class="input-group">
                                <input value="" type="number" class="form-control" name="taxRate" id="taxRate" placeholder="Tax Rate">
                                <div class="input-group-addon">%</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Tax Amount: &nbsp;</label>
                            <div class="input-group">
                                <div class="input-group-addon currency">$</div>
                                <input value="" type="number" class="form-control" name="taxAmount" id="taxAmount" placeholder="Tax Amount">
                            </div>
                        </div>                          
                        <div class="form-group">
                            <label>Total: &nbsp;</label>
                            <div class="input-group">
                                <div class="input-group-addon currency">$</div>
                                <input value="" type="number" class="form-control" name="totalAftertax" id="totalAftertax" placeholder="Total">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Amount Paid: &nbsp;</label>
                            <div class="input-group">
                                <div class="input-group-addon currency">$</div>
                                <input value="" type="number" class="form-control" name="amountPaid" id="amountPaid" placeholder="Amount Paid">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Amount Due: &nbsp;</label>
                            <div class="input-group">
                                <div class="input-group-addon currency">$</div>
                                <input value="" type="number" class="form-control" name="amountDue" id="amountDue" placeholder="Amount Due">
                            </div>
                        </div>
                    </span>
                </div>
            </div>
            <div class="clearfix"></div>                
        </div>
    </form>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>

我使用 select2 动态添加行的代码是：

    <script>




var count = $(".itemRow").length;
    $(document).on('click', '#addRows', function() { 
        count++;
        var htmlRows = '';
        htmlRows += '<tr>';
        htmlRows += '<td><input class="itemRow" type="checkbox"></td>';          
        htmlRows += '<td><input type="text" name="productCode[]" id="productCode_'+count+'" class="form-control" autocomplete="off"></td>';     
        
        
        htmlRows += '<td><select class="select2 form-control" id="productName_'+count+'" name="productName[]"><option value="" selected="selected">Select Item</option><option value="1">pAPER</option><option value="2">KirloskarGREEN</option></select></td>';    
        
        
        htmlRows += '<td><input type="number" name="quantity[]" id="quantity_'+count+'" class="form-control quantity" autocomplete="off"></td>';        
        htmlRows += '<td><input type="number" name="price[]" id="price_'+count+'" class="form-control price" autocomplete="off"></td>';      
        htmlRows += '<td><input type="number" name="total[]" id="total_'+count+'" class="form-control total" autocomplete="off"></td>';          
        htmlRows += '</tr>';
        $('#invoiceItem').append(htmlRows);
    }); 




    $(".select2").select2();
    $('.add_more_item').click(function(e) {
    
        $latest_tr  = $('#req_table tr:last');
      $('select.select2').select2('destroy');
    
        $clone          = $latest_tr.clone();
    
        $latest_tr.after($clone);
        $('select.select2').select2();
        $clone.find(':text').val('');
        item++;
        show_hide_item(item);
    });
    
    
    </script>

Answer 1

在添加新行时给每个选择一个唯一的 id。打电话

$('#idselect2").select2(); 

其中 idselect2 选择的 id。 每次点击添加按钮时，id 可能会“select2”，计数器增加一

$(#select2${id}).select2();