php - 为什么在clone row的时候select2多个数组值要合并
问题描述
当我提交表单时,select2 multiple 的数据被组合成一个数组。
AAA
Array ( [0] => 2 [1] => 3 [2] => 1 [3] => 3 [4] => 5 )
BBBB
Array ( [0] => 2 [1] => 3 [2] => 1 [3] => 3 [4] => 5 )
怎么做?分别为每一行选择2多个数据。
$(".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>
...
解决方案
试试下面的代码。我在代码中添加了详细信息。
jQuery 代码。
clone.find("input, select").attr("disabled", false).val("");
//Add the code to replace the name attr of input field.
clone.find("input,select").each(function() {
/*When click on add row button replace the name attr
second row to reason[1][] - will append all the option value of second row
third row to reason[2][] - will append all the option value of third row
----
etc
*/
this.name = this.name.replace(/\[(\d+)\]/,function(str,p1){return '[' + (parseInt(p1,10)+i) + ']'});
});
HTML 代码。
<!-- before you are adding all selected item in single array reason, change the name attribute to reason[0][] -->
<select class="selectReason" name="reason[0][]">
<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>
PHP 代码。
if(isset($_POST['name'])){
$name = $_POST['name'];
$reason = $_POST['reason'];
for($i=0; $i<count($name); $i++){
//value of name by row
echo $name[$i].'<br/>';
//Onsubmit get the value of select option seperated by each row
echo "<pre>";
print_r($reason[$i]);
}
}
输出 -
AAA
Array
(
[0] => 1
[1] => 2
[2] => 3
)
BBB
Array
(
[0] => 2
[1] => 3
[2] => 4
)
CCC
Array
(
[0] => 1
[1] => 2
[2] => 3
)
推荐阅读
- postgresql - 是否可以执行需要在 Postgres 中过滤的 upsert?
- sonarqube - 如何在项目级别使用 UI 排除代码覆盖率?
- bluetooth - 如何在 Mac App 处于非活动状态时捕获蓝牙控制器?
- java - 我应该担心我的网站性能,因为 tomcat 9 没有使用阻塞 io
- python - 在 python 中显示列表中的素数。说不支持的操作数时出错
- angular - 是否可以在 Angular Material Tooltip 中有一个列表?
- jsp - jsp:include - 处理 JSP 页面时发生异常
- javascript - 错误无法使用带有 mysql 的 node.js 读取未定义的属性
- php - Laravel 嵌套子级计数(类别)
- intersection - 如何解决播放器与矩形相交的这个小问题?