输入数组忽略 DOM 加载后添加的值

Question

我的页面上的表单中有一个<select name="id[]"> 下拉菜单。我还有一个按钮，可以通过 jQuery 添加更多 select 框（及其容器）：

$(document).ready(function() {
    // $(".add-blank").click(function() {
    $(document).on("click", ".add-blank", function() {
        var container = $(this).closest("div");
        container.find(".blank-group").last().clone().appendTo(container.find(".blank-container"));
    });
});

但是，当我POST 将此信息写入脚本时，var_dump($_POST['id']) 时，无论该数组中应该有多少项，该数组都只有一个值：

array(1) { [0]=> string(5) "21699" }

我几乎可以肯定这是因为第一个选择框在页面加载时在代码中，但其余的选择框是在 DOM 准备好后通过 jQuery 添加的。

我的问题是，我该如何克服这个问题？

正如您在上面的 jQuery 中看到的，我尝试将基本的 .click() 更改为 .on("click")，但这似乎没有任何效果。

我的表单的基本 HTML 是这样的：

<form>
    <div class="blank-container">
        <div class="form-group blank-group">
            <select name="id[]"></select>
        </div>
    </div>
    <button class="add-blank" type="button"></button>
    <button type="submit"></button>
</form>

然后按三下.add-blank 按钮扩展表单，如下所示：

<form>
    <div class="blank-container">
        <div class="form-group blank-group">
            <select name="id[]"></select>
        </div>
        <div class="form-group blank-group">
            <select name="id[]"></select>
        </div>
        <div class="form-group blank-group">
            <select name="id[]"></select>
        </div>
        <div class="form-group blank-group">
            <select name="id[]"></select>
        </div>
    </div>
    <button class="add-blank" type="button"></button>
    <button type="submit"></button>
</form>

如果我在这些选择中分别选择值111、222、333 和444，我希望POST 如下数组：

array(4) { [0]=> string(3) "111", [1]=> string(3) "222", [2]=> string(3) "333", [3]=> string(3) "444" },

但无论我尝试在 id[] 数组中传递多少/很少的值，只有第一个值到达脚本，因为最初加载时页面上只有一个 <select>..

Answer 1

您添加新选择框的方式可能是问题的原因。您只需 .clone() 现有的 <select>。这意味着您还克隆了新选择的名称。无论您在修改后的 html 表单上有多少选择。发布后接收脚本只会看到一个变量$id[]。

克隆后你应该修改你的新选择，给它自己的name。

但是，即使使用相同的名称，您也应该得到一些结果，请参阅此处了解您页面的修改版本：

$(".add-blank").click(function() {
   var cont=$(this).closest('div');
   $(".blank-group",cont).last().clone().appendTo(".blank-container",cont);
});
$('#go').click(function(){
   $('#out').text(decodeURI($('form').serialize()));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="blank-container">
  <button class="add-blank">click here to get a new select</button>
  <div class="blank-group">
    <select name="id[]">
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
    </select>
  </div>
</div>
</form>
<button id="go">show variables to be posted</button><div id="out"></div>

当您添加更多选择时，更改它们的值，然后单击“显示要发布的变量”，您将获得类似id[]=1&id[]=2&id[]=3 的字符串。这应该由您的接收脚本按照您的预期进行处理。

第二次编辑：
现在我用于克隆的 jquery 选择器做了你原来做的事情，它仍然可以工作......