我有一个发票表单,我需要根据需要添加项目.单击相应行上的“添加”按钮时,该行已附加到上一行.但是Select2之后不能正常工作.
我尝试过来自SO的解决方案,其中在克隆之前销毁select然后再次初始化它.但是它在第一行之后初始化了两个select2.
<tr class="tr_clone">
<td>
<div class="input select">
<select required="required" id="Item" class="items select2-hidden-accessible" name="data[Invoice][item_id][]" tabindex="-1" aria-hidden="true">
<option value=""></option>
<option value="1">item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 1+2</option>
<option value="4">Set 1</option>
<option value="5">NURSERY Books</option>
</select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 231px;"><span class="selection"><span aria-expanded="false" aria-haspopup="true" aria-autocomplete="list" role="comboBox" class="select2-selection select2-selection--single" tabindex="0" aria-labelledby="select2-Item-container"><span class="select2-selection__rendered" id="select2-Item-container" title=""></span><span role="presentation" class="select2-selection__arrow"><b role="presentation"></b></span></span>
</span><span aria-hidden="true" class="dropdown-wrapper"></span></span>
</div>
<input type="hidden" id="ItemName" class="item_name" name="data[Invoice][item][]">
<input type="hidden" id="ItemName" class="item_group_id" name="data[Invoice][item_group_id][]"> </td>
<td>
<div class="input text">
<input type="number" required="" min="0" name="data[InvoiceDetail][quantity][]" class="quantity small" id="quantity][">
<p class="quantity_a"></p>
</div>
</td>
<td>
<div class="input text">
<input type="text" readonly="readonly" required="" name="data[InvoiceDetail][price][]" class="price small" id="price">
</div>
</td>
<td>
<div class="input text">
<input type="text" readonly="readonly" required="" name="data[InvoiceDetail][unit][]" class="unit small" id="unit][">
</div>
</td>
<td>
<div class="input text">
<input type="text" readonly="readonly" required="required" id="Amount" class="amount small" name="data[Invoice][amount][]">
</div>
</td>
<td>
<input type="button" class="tr_clone_add" value="Add" name="add">
</td>
<td class="remove">X</td>
</tr>
Jquery代码：
$("table").on('click','.tr_clone_add',function() {
$('.items').select2("destroy");
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);
$('.items').select2();
});
结果：
解决方法
试试这个
$('.items').select2();
$("table").on('click',function() {
$('.items').select2("destroy");
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$tr.after($clone);
$('.items').select2();
$clone.find('.items').select2('val','');
});
/ *编辑* /
如果我从SELECT属性id和css类中删除select2-hidden-accessible并且在底部完全删除了select2 select2-container它似乎工作正常.
