Question

i have a little problem with my javascript code,
i build a function that add filed by a qty that the user choose,
here is the function

$(document).ready(function() {
  $('.qty').change(function(){
     for (var i=0;i<$('.qty').val();i++){
       $('.append').append('<select name="data[]"><option value="one">1</option></select>');
     }
  });
});

AND the html code is:

<select name="qty" class="qty">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
</select>
<div class="append">

</div>

when i pick a value in the qty, lets say 3, it open me up 3 select fields, but when i change the selection to 2, it adds me 2, so i have 5 select fileds, how do i reset? if i pick 1 it will open me 1 and if i change it to 2 it will change and open me 2 not 3 like it is now.

Answer 1

Try:

$(document).ready(function() {
  $('.qty').change(function(){
    var html=''
     for (var i=0;i< parseInt($('.qty').val());i++){
       html += '<select name="data[]"><option value="one">1</option></select>';
     }
     $('.append').html(html);
  });
});