jquery添加額外的選擇框

Question

我正在工作的網絡形式，要求AP入門學生採取的課程，我想使用JQuery，所以我可以添加另一個課程，如果他們與他們的分數超過一個將最終進入數據庫我沒有任何運氣，讓這個工作正常我需要保持課程和分數一起

我用這個作爲例子，但沒有很多運氣與我的數據 http://jsfiddle.net/NotInUse/tZPg4/5132/

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

<label for="apCourses"> 
<select name="apCourses"> 
<option name="none" value="none"> does not apply </option> 
<option name="one" value="one"> Art History </option> 
<option name="two" value="two"> Art 2-D </option> 
<option name="three" value="three"> Art- Drawing </option> 
<option name="three" value="three"> Biology </option> 
<option name="three" value="three"> Calculus AB </option> 
<option name="three" value="three"> Calculus BC </option> 
<option name="three" value="three"> Computer Science </option> 
<option name="three" value="three"> Chemistry </option> 
<option name="three" value="three"> English Lang &amp; Composition</option> 
<option name="three" value="three"> English Literature/Comp </option> 
<option name="three" value="three"> Environmental Science </option> 
<option name="three" value="three"> Government/US </option> 
<option name="three" value="three"> Government/Comp </option> 
<option name="three" value="three"> US History </option> 
<option name="three" value="three"> European History </option> 
<option name="three" value="three"> World History </option> 
<option name="three" value="three"> Foreign Language </option> 
<option name="three" value="three"> Foreign Literature </option> 
<option name="three" value="three"> Latin - Lit </option> 
<option name="three" value="three"> Latin -Vergil </option> 
<option name="three" value="three"> Macroeconomics </option> 
<option name="three" value="three"> Microeconomics </option> 
<option name="three" value="three"> Music Theory </option> 
<option name="three" value="three"> Physics B </option> 
<option name="three" value="three"> Physics C Mechanics </option> 
<option name="three" value="three"> Physics C, Electricity and Magnetism </option> 
<option name="three" value="three"> Psychology </option> 
<option name="three" value="three"> Human Geography </option> 
<option name="three" value="three"> three </option> 
</select> </label> 


<label for="apScore">Score:</label> 
<select name="apScore"> 
<option name="0" value="0"> 0 </option> 
<option name="1" value="1"> 1 </option> 
<option name="2" value="2"> 2 </option> 
<option name="3" value="3"> 3 </option> 
<option name="4" value="4"> 4 </option> 
<option name="5" value="5"> 5 </option> 

</select> 

Answer 1

根據上面的HTML示例，我添加了一個按鈕元素，它將允許用戶使用jQuery的一個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> 

添加更多的課程，然後包裝過程和得分選擇框：

$('#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(); 
}); 

工作示例：http://jsfiddle.net/AAmj5/

希望幫助！