Question

$('#myClick').click(function () {
            $('#fromList').find('option')
            .remove()
            .end()

            for (var index = 0; index < 50000; index++) {
                $('#fromList').find('option').end().append('<option value="' + index + '">Dist ' + index + '</option>').val('whatever');
            }
        });

<select id="toList" name="drop1" class="listBox" multiple="multiple">
                    <option value="1">item 1</option>
                    <option value="2">item 2</option>
                    <option value="3">item 3</option>
                    <option value="4">item 4</option>
 </select>

I am trying to use the Jquery to dump a massive load of data into a selection box. Now most often this will only throw a couple of hundred people into the selection box, but sometimes for some clients it could throw 50,000+.

Is it possible to parse that much data into a selection box on the fly and expect the page to still be responsive?

Will Ajax make this performance better?

Or do i need to dump this idea all together?

Right now with the above code it times out.

Answer 1

To improve performance, your best bet is to cache your options in a variable and append everything at last to prevent excessive reflows on the DOM, which are really expensive.

var options = '';
for (var index = 0; index < 50000; index++) {
    options += '<option value="whatever"' + index + '">Dist ' + index + '</option>';
}
$('#fromList').append(options);