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示例，我添加了一个按钮元素，允许用户添加更多课程，然后在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/

希望有所帮助！

Jquery添加其他选择框

1 个答案: