a possible solution of jquery based dropdown?

Question

I am generating a dropdown on a completely separate page by jquery append function. I was getting duplicate rows of data if I just use append

  if(params.totalRecords > 50){
         var i, j;
    j = 0;              
    for(i=0; i < params.totalRecords; i++){                 
    if(i%50==0){
    $('#startRecord').append( 
    $('<option></option>').val(i).html((j+1)+'-'+(j+=50)));          
    }
  }             
    $('#dropDownSpan').css('visibility', 'visible'); 
}  

so now when I was adding the values to drop down it was adding duplicate rows like this

<option value=0>1-50</option>
<option value=50>51-100</option>
<option value=0>1-50</option>

depending what option I would choose, it would just make it duplicate.

Now to avoid that I did the following

  if(params.totalRecords > 50){
    $('#startRecord').val(0).html("1-50");
    var i, j;
    j = 0;              
    for(i=0; i < params.totalRecords; i++){                 
    if(i%50==0){
    $('#startRecord').append( 
    $('<option></option>').val(i).html((j+1)+'-'+(j+=50)));          
    }
  }             
    $('#dropDownSpan').css('visibility', 'visible'); 
}    

Now the problem is that it alway restes it to 1-50 records cause of

$('#startRecord').val(0).html("1-50");

How could I show the last selected one there. thanks

Answer 1

I'm going to suggest a very different, hopefully simpler loop approach here:

if(params.totalRecords > 50){
  for(var i=0; i < params.totalRecords; i+=50) {
    $('<option></option>', { value: i, html: (i+1)+'-'+Math.min(i+50, params.totalRecords) })
      .appendTo('#startRecord');
  }             
  $('#dropDownSpan').css('visibility', 'visible'); 
} 

You can give it a try here, this simplifies how the looping's done overall. I'm still not 100% sure how you're getting that extra appended row, are you sure your current code isn't getting called twice somehow, with a different totalRecords count?

One side note about the above, it has slightly different output, for say 121 records instead of "101-150" it'll put "101-121" for the last item which is a bit more accurate, I hope that's what you're after, the overall output looks like this:

<select id="startRecord">
  <option value="0">1-50</option>
  <option value="50">51-100</option>
  <option value="100">101-121</option>
</select>