Когда я отправляю форму, данные множества select2 объединяются в один массив.
ААА
Array ( [0] => 2 [1] => 3 [2] => 1 [3] => 3 [4] => 5 )
ВВВВ
Array ( [0] => 2 [1] => 3 [2] => 1 [3] => 3 [4] => 5 )
Как сделать? Select2 несколько данных для каждой строки отдельно.
$(".selectReason").select2({
multiple: true
}).val();
$(".selectReason").val("").trigger("change");
$(".btnAdd").on("click", function() {
$(".selectReason").select2("destroy");
var row = $(".item").find("tbody").find("tr:last");
var clone = row.clone();
clone.find("input, select").attr("disabled", false).val("");
clone.find("td:last").show();
clone.find(".btnRemove").click(function() {
$(this).closest("tr").remove();
});
row.after(clone);
$(".selectReason").select2({
multiple: true
});
clone.show();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class="row">
<a href="javascript:void(0)" class="btnAdd">+ Add Item</a>
<table class="table item">
<thead>
<tr>
<th>Name</th>
<th width="15%">Reason</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="name[]" required>
</td>
<td>
<select class="selectReason" name="reason[]">
<option value="1">AAAA</option>
<option value="2">BBBB</option>
<option value="3">CCCC</option>
<option value="4">DDDD</option>
<option value="5">EEEE</option>
</select>
</td>
<td style="display:none;">
<button class="btnRemove">-</button>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-success" name="btnInsert">
<i class="fa fa-check mr-2"></i>OK
</button>
</div>
...