jQuery的，加上輸入元素

Question

我已經成功地將輸入元素放入格，它看起來像這樣：

$(document).ready(function() { 
    $('#jumlah').change(function() { 
var jum = $('#jumlah').val(); 

for(i=1;i<=jum; i++){ 
    $('#jawaban').append('<label>Jawaban Soal ' + i + ' : </label><input type="text" name="jawab'+i+'" id="jawab[]" size="2" maxlength="1" /><br>'); 
} 
    }); 
}); 

和我的一些HTML代碼：

<select name="jumlah" id="jumlah" class="test"> 
    <option value="0" selected="selected">choose value</option> 
    <?php 
    for($i=1;$i<=20;$i++) 
    echo("<option value=\"$i\">$i</option>"); 
?> 
</select> 

<div id="jawaban"></div> 

，但是當我選擇不同的價值，它會在第一個輸入元素下添加更多輸入元素，例如，如果我選擇選項2，然後是選項3，它將如下所示：

Jawaban Soal 1 : <input /> 
Jawaban Soal 2 : <input /> 
Jawaban Soal 1 : <input /> 
Jawaban Soal 2 : <input /> 
Jawaban Soal 3 : <input /> 

請大家幫忙，我還是Jquery的小輩。我期待着您的迴應。

Answer 1

我猜你想要舊的消失，在這種情況下，你應該首先emptyjawaban div。

$(document).ready(function() { 
    $('#jumlah').change(function() { 
    var jum = $('#jumlah').val(); 

    $('#jawaban').empty(); 

    for(i=1;i<=jum; i++){ 
     $('#jawaban').append('<label>Jawaban Soal ' + i + ' : </label><input type="text" name="jawab'+i+'" id="jawab[]" size="2" maxlength="1" /><br>'); 
    } 
    }); 
}); 

你（逸岸相當數量的人），應該緩存 jQuery的對象構建。每次在代碼中使用$('someSelector')時，jQuery會重新選擇您的元素，並且每次都會爲您返回一個新對象。 這不是小事！

$(document).ready(function() { 
    $('#jumlah').change(function() { 
    var jum = +$('#jumlah').val(); // convert this to an integer (it's a string otherwise) 
    var jawaban = $('#jawaban').empty(); 

    for(var i=1;i<=jum; i++){ // don't forget to initialize i! 
     jawaban.append('<label>Jawaban Soal ' + i + ' : </label><input type="text" name="jawab'+i+'" id="jawab[]" size="2" maxlength="1" /><br />'); 
    } 
    }); 
});