How to add a large number of items to an HTML selectObject

Question

I need to populate eight selectObject pulldown objects on a page with several thousand (8192) items each. I'm currently doing this in Javascript the only way I know how:

var iCount;
var option1;
var selectObject1 = document.getElementById('ifbchan');
for(iCount = 0; iCount < 8192; iCount++)
    {
    option1=document.createElement("option");
    option1.text = "Out " + iCount;
    option1.value=iCount;
    try
        {
        selectObject1.add(option1, selectObject1.options[null]);
        }
    catch (e)
        {
        selectObject1.add(option1, null);
        }
    }
selectObject1.selectedIndex =  0;

This method works properly but is extremely slow! Each of these 8K loops takes something like 10 seconds to complete. Multiply by 8 different loops and the problem is obvious. Is there any other way to add large numbers of items to a drop down list that would be faster? Any faster alternatives to the drop down control for presenting a large list of items? Thanks for any ideas.

~Tim

Answer 1

I'd try the following:

var elements = ""
var i;
for(i= 0; i < 8192; i++){
    elements += "<option value='"+ i + "'>Out " + i + "</option>";
}


document.getElementById("ifbchan").innerHTML = elements;

This way you only perform one action on the DOM per loop not 8000+.

Oh and here's one I prepared earlier: http://jsfiddle.net/3Ub4x/

Answer 2

Few things before the answer.

First of all I do not think that the best way to do this is a server side implementation. If you can do something on the client you should do this and not touch your server (if it is not security related).

Second thing - why exactly do you need 8000 elements in select list? Think as a user of your app, who would like to scroll through 8000 elements just to select his element? As it was mentioned before - autocomplete sounds much more suitable.

And right now is an answer:

Your original approach is here : it takes approximately 1724 miliseconds to complete for 10000 elements (You can see this by running the script and checking inspector).

var start = new Date();
var n = 10000;

var iCount;
var option1;
var selectObject1 = document.getElementById('ifbchan');
for(iCount = 0; iCount < n; iCount++)
    {
    option1=document.createElement("option");
    option1.text = "Out " + iCount;
    option1.value=iCount;
    try
        {
        selectObject1.add(option1, selectObject1.options[null]);
        }
    catch (e)
        {
        selectObject1.add(option1, null);
        }
    }
selectObject1.selectedIndex =  0;

var time = new Date() - start;
console.log(time);

I do not like a lot of this code (it is too many lines) so I will rewrite it in jquery.

var start = new Date();
var n = 10000;

for (var i = 0; i<n; i++){
    $("#ifbchan").append("<option value="+i+">"+i+"</option>")
}

var time = new Date() - start;
console.log(time);

The next fiddle is here . Much less lines, and some time improvement. Now it is 1312 milliseconds. But it append new element in every loop.

The next fiddle get rid of this.

var start = new Date();
var n = 10000;

var html = '';
for (var i = 0; i<n; i++){
    html += "<option value="+i+">"+i+"</option>";
}

$("#ifbchan").append(html);

var time = new Date() - start;
console.log(time);

Wow, now it is only 140 milliseconds.

Answer 3

for (var i = 0; i<n; i++){
   select.append('<option value='+i+'>'+i+'</option>');
}

Beware, this doesn't work in IE. See this link -

Using innerHTML to Update a SELECT – Differences between IE and FF