Question

this is a nutts job here. Not sure if jquery can handle this. I have a php page called page1.php where I have drop down like this

<select id="startRecord" >
   <option value="0"></option>
</select>  

Now I caclulate some values here and then send the values to page2.php. Now on page2.php I do some more caclulations and rum a query. If the result of the query is more than 30 records I want the drop down on page1.php reflect that so my users can select the query. so lets say that the result of the query on page2.php was 70, the drop down on page 1 should change to this

<select id="startRecord" >
   <option value="0">0-30</option>
   <option value="30">31-60</option>
   <option value="61">61-70</option>
</select>  

I am thinking I would need innerHtml or .html(). But not sure how to implement this for this case scenario.

Answer 1

Not sure I completely follow your question but if you are asking how to add items to a dropdown with jquery you can do something like this:

$('#startRecord').append(
    $('<option></option>').val("30").html("31-60")
);

EDIT: Sorry it took so long. We have some people over the house right now. Here you go. Hope this helps:

        $(document).ready(
            function () {
                $("#startRecord option").remove();

                var total = 30;
                var results = 100;
                var lastOption = { Value: -1, End: 0, toString: function () { return this.Value.toString() + "-" + this.End.toString() } };
                var counter = 0;

                while (parseInt(results / total, 10) >= counter) {
                    lastOption.Value = total * counter + (lastOption.Value == -1 ? 0 : 1);
                    lastOption.End = lastOption.Value + total - (lastOption.Value == 0 ? 0 : 1);
                    lastOption.End = (lastOption.End > results) ? results : lastOption.End;
                    $('#startRecord').append(
                        $('<option></option>').val(lastOption.Value.toString()).html(lastOption.toString())
                    );

                    counter++;
                }
            });