克隆元素的增量名称标记

Question

我有一个包含克隆元素的表单。表单的方法是POST。当我转发POST的结果时，只有最终的选择＆＃39;显示框值，因为它们都是相同的。如何将name标记更改为克隆元素？

JSFiddle： https://jsfiddle.net/hLefegxz/

HTML

<div id="employees-div">
<label for="employees">Employee(s)</label>
<div class="select-wrapper" id="select-employees">

    <select id="employees" name="employees" >
        <option value="" selected disabled>- Select Employee -</option>
        <option value="1"> Jason Bourne </option>
        <option value="2"> James Bond </option>
        <option value="3"> Ethan Hunt </option>
    </select>

</div>

JS for the Clone

$(function() {
    $("#addMore").click(function(e) {
        var newSelect = $("#select-employees").clone();
        newSelect.val("123");
        $("#employees-div").append(newSelect);
     });
});

目前，所有元素都具有相同的员工姓名标签。进入$ _POST array显然需要有所不同。我怎样才能让它们与众不同？我在想可能会增加并保持计数？它目前是这样的：

Answer 1

不要担心更改名称，你可以而且应该使用数组作为名称，但是你应该担心id，因为id必须是唯一的，你要克隆元素而不改变新的id元件。

通过将[]添加到输入名称，它将作为数组发送到服务器，例如，如果您使用PHP，则可以从$_GET['employees']获取它们。你可以循环的数组。

＆＃13;

＆＃13;

$(function() {
    $("#addMore").click(function(e) {
        var newSelect = $('select[name="employees[]"]:first').clone();
        $("#select-employees").append("<br>");
        $("#select-employees").append(newSelect);
     });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="employees-div">
<label for="employees">Employee(s)</label>
<div class="select-wrapper" id="select-employees">

    <select name="employees[]" >
        <option value="" selected>- Select Employee -</option>
        <option value="1"> Jason Bourne </option>
        <option value="2"> James Bond </option>
        <option value="3"> Ethan Hunt </option>
    </select>

</div>
<button id=addMore>+ Employee</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以简单地将您的选择命名为employees[]，而不是在每个＆＃34;新员工＆＃34;上使用名称和增加整数。这将以阵列格式将每个员工发送到您的服务器，允许您使用简单的循环。

您的代码虽然是另一个问题。 ID应该是唯一的，因此每次克隆select时，都应更改ID。