Question

本质上，这就是我想要做的

我有一个按钮，通过触发它，会向用户显示一本书的下拉菜单。每次触发时，都会加载一个新的下拉列表。

我一直将它们加载到用户的方法是克隆一个隐藏的div。像这样

<form action="POST">
  <div id="books"></div>
  <button onclick="addBook()"></button>
  <input type="submit" value="Submit">
</form> 

<select id="book" name="books[]" style="display: none;">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


<script>
$count = 0;

function addBook() {
     $clone = $("#book").clone().show();
     clone.find("#book").attr('id','book-' + $count);
     clone.appendTo("#books");
     $count += 1;
 }

例如，在单击按钮3次之后，这将是我的html显示（我显然已经更改了所选值）

  <form action="POST">
    <div id="books">
    <select id="book-0" name="books[]">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C" selected>C</option>
  </select>

 <select id="book-1" name="books[]">
  <option value="A">A</option>
  <option value="B" selected>B</option>
  <option value="C">C</option>
  </select>

<select id="book-3" name="books[]">
  <option value="A" selected>A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

  </div>
  <button onclick="addBook()"></button>
  <input type="submit" value="Submit">
</form> 

 <select id="book" name="books[]" style="display: none;">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
   </select>

现在的问题是..当我点击提交时，我正在使用名称字段（即books []）收集他们的数据，该名称字段应该类似于books [C，B，A]。但是，当我打印books []值时，会得到book [C，B，A，A]。最后一个A似乎来自隐藏的div！即使它是隐藏的。

var books = $("select[name='books[]']").map(function(){return $(this).val();}).get();

console.log(books);

我尝试禁用它，使其变为只读等，但是每次隐藏的div的值似乎都附加到我的数组元素上（我不想要）

Answer 1

稍微更改代码，对我来说很好。我假设您还将隐藏带有表单数据的select（从中用于克隆的）值。 Submit或$（“＃myForm”）。serialize（）都给出正确的值，没有其他值。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="addBook" onclick="addBook()">Add Book</button>
<form action="POST" id="myForm">
  <div id="books"></div>
  <input type="submit" value="Submit">
</form> 

<select id="book" name="books[]" style="display: none;">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


<script>
$count = 0;
function addBook() {
     $clone = $("#book").clone().show();
     $clone.appendTo("#books");
     $("#books select:last-child").attr('id','book-' + $count);
     $count += 1;
 }
 </script>

提交没有隐藏HTML元素数组值的表单

1 个答案: