Jquery添加其他选择框

我正在制作一个网络表单，要求新来的学生参加AP课程，我正在尝试使用JQuery，以便他们可以添加另一门课程，如果他们参加了不止一门课程以及他们的分数，这将最终进入一个数据库。我没有任何运气让它正常工作，我需要将课程和分数放在一起

我用这个作为例子，但我的数据没有太多的运气

请列出您参加的所有AP测试及其分数

不适用
艺术史
第2-D条
绘画艺术
生物
微积分AB
微积分
计算机科学
化学
英语朗朗；作文
英国文学/综合
环境
政府/美国
政府/公司
美国历史
欧洲历史
世界历史
外语
外国文学
拉丁语
拉丁语-维吉尔
宏观经济学
微观经济学
音乐理论
物理B
物理与力学
物理学，电磁学
心理学
人文地理学
3
分数：
0
1.
2.
3.
4.
5.

基于上面的HTML示例，我添加了一个按钮元素，允许用户添加更多课程，然后将课程和分数选择框包装在一个div中

<p> Please list all of the AP tests you have taken and their scores. </p>

<div id="select-boxes-container">
    <div>
       //your select boxes 
       <button class="button-add">Add another course</button>
    </div>
</div>

工作示例：

---

希望有帮助

试试这个，你的JSFIDLE似乎很管用。你的问题到底是什么？下面是Satish的分数选择更新：我用我的表单测试了这一点，按钮似乎不再添加它提交的课程。我的formIt提交，因为你没有阻止默认操作。您好，您可以通过调用preventDefault函数来阻止添加，它将编辑代码。顺便说一句，我已经更新了JSFIDLE。这些都非常有用，谢谢！即使使用preventDefault函数，我仍然会遇到“添加课程”按钮提交表单的问题，并且不确定为什么会发生这种情况。您好，如果您可以创建一个表单的JSFIDLE，这将有助于我们识别问题。同时，您可以用锚元素替换按钮元素，请参见以下示例：

<p> Please list all of the AP tests you have taken and their scores. </p>

<div id="select-boxes-container">
    <div>
       //your select boxes 
       <button class="button-add">Add another course</button>
    </div>
</div>

$('#select-boxes-container').on('click', '.button-add', function(e){
    e.preventDefault();
    $('#select-boxes-container').append($(this).closest('div').clone());
    $(this).removeClass('button-add')
    .addClass('button-remove')
    .text('Remove');
});
$('#select-boxes-container').on('click','.button-remove', function(e){
        e.preventDefault();
    $(this).closest('div').remove();
});