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。

然而，即使名称相同，您也应该获得一些结果，请点击此处查看您网页的修改版本：

＆＃13;

$(".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()));
});

＆＃13;

<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>

＆＃13;

当您添加更多选择时，更改其值，然后单击＆＃34;显示要发布的变量＆＃34;你会得到一个像id[]=1&id[]=2&id[]=3这样的字符串。这应该按照您的预期由接收脚本处理。

第二次修改：
现在我的用于克隆的jquery选择器完成了你原来所做的事情，它仍然有用......

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

1 个答案: