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

本质上，这就是我要做的

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

我一直将它们加载到用户的方式是克隆一个隐藏的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;
 }

---

我尝试过禁用，使其成为只读等，但每次隐藏div的值似乎都附加到我的数组元素上，我不希望在代码中稍有更改，对我来说效果很好。我假设您正在从用于克隆带有表单数据的值的位置获得隐藏选择。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>

---

console.logbooks[]将导致未捕获的语法错误：意外标记]，而不是books[C、B、A、A]…？听起来像是一项工作，因为我相信许多浏览器不会发布带有显示的输入：不过，没有一个直接应用于它们。除了将它们设置为“显示：无”之外，您可能还希望在克隆时重新启用它们。话虽如此，我同意@JosephMarikle的观点，模板可能是一种更好的方式。您是否通过循环提交表单或集合值？似乎已经解决了！谢谢大家

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

console.log(books);

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