添加更多下拉框

Question

默认情况下，我有一个选择框Car：

<select name="cars[]">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="mercedes">Mercedes</option>
 <option value="audi">Audi</option>
</select> 

但是我想要一个链接说“＃34;添加另一辆车＆＃34;这将创建一个相同的下拉框，这样当它提交时，它将是卡[0] =值和汽车[2]值提交。每次用户点击＆＃34;添加另一辆车＆＃34;他们可以像他们一样创建一个新的下拉框。

Answer 1

试试这个：

  

cloneNode创建指定节点的精确副本。

var container = document.getElementById('container');
var onAddClick = function() {
  var clone = document.getElementById('cars').cloneNode(true);
  clone.removeAttribute('id');
  container.appendChild(clone);
};
document.getElementById('add').addEventListener('click', onAddClick);

<div id="container">
  <select name="cars[]" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>
<button type="button" id="add">Add</button>