CODEWITHSUNDEEP
javascriptjqueryhtml
Bonik
Bonik

Reputation: 812

Javascript reset loop

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.

Upvotes: 1

Views: 884

Answers (7)

Rune FS
Rune FS

Reputation: 21742

To preserve any selections the user have already made you could change the structue somewhat

$(document).ready(function() {
  $('.qty').change(function(){
     var count = $(.append).find("select").length,
         qty = $('.qty').val(),
         i,
         html = $('.append').html();
     //append any needed elements
     if(count < qty) {
       for (i=count;i < qty; i += 1){
         html += '<select name="data[]"><option value="one">1</option></select>';
       }
       $('.append').html(html);
     }
     //remove any excess elements
     for(;count<$(.append).find("select").length; 
          $(.append).find("select:last").remove()){}
  });
});

Upvotes: 0

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

Use this to reset html:

$('.append').html('');

like:

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

Upvotes: 0

ProWebMonkey
ProWebMonkey

Reputation: 121

Instead of:

$('.append').append('<select name="data[]"><option value="one">1</option></select>');

Use

$('.append').html('<select name="data[]"><option value="one">1</option></select>');

I think that is what is causing it to append the additional fields.

Upvotes: 0

martincarlin87
martincarlin87

Reputation: 11042

You could add one line to empty the append div before the loop

$('.append').empty();

so it would be:

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

Fiddle:

http://jsfiddle.net/

Upvotes: 1

Anton
Anton

Reputation: 32581

Use .html

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

here is a working jsfiddle http://jsfiddle.net/P2F9x/

Upvotes: 1

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50563

Just clear the .append div contents prior to appending, you can clear it with .html(''), so you just need to replace your following line:

$('.append').append('<select name="data[]"><option value="one">1</option></select>');

for this one:

$('.append').html('').append('<select name="data[]"><option value="one">1</option></select>');

Upvotes: 1

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

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);
  });
});

Upvotes: 4

Related Questions