0

我正在处理网络表单，要求新生参加 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>
4

1 回答 1

0

根据上面的 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>

使用 jQuery：

$('#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/

希望有帮助！

于 2013-07-22T15:17:08.163 回答