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