不带隐藏HTML元素数组值的提交表单

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>

现在的问题是..当我点击submit时，我正在使用name字段(即books[])收集他们的数据，该字段应该类似于booksC，B，A。但是，当我打印books[]值时，我得到的是booksC，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>