Loading items into array from SQL Server The program we are working at has the following function:

function loadItem(arrayValues,arrayNames) {
    var j=document.getElementById('itemSelect').options.length;
    for(var i=0;i&lt;arrayValues.length;i++) {
        if(!existsElement(document.getElementById('itemSelect'),arrayValues[i])) {
            document.getElementById('itemSelect').options[j]=new Option(arrayValues[i]+" - "+arrayNames[i],arrayValues[i],null);
            j++;
        }
    }
}


This fills a list that is later used to filter a search.

It was originally designed for small arrays (up to 25 elements) and it worked perfectly.

Now, I'm trying to use it to fill with the whole contents of a SQL table (about 9500 elements), I take the data from the DB with Java, transfer it to Javascript via AJAX and parse that List into two arrays that can be used with this function. That takes about a second, but then this function takes about 20 seconds to complete.

Why is it that slow, and what can I do to improve it?
Main issues

Access


DOM operations take time. You're selecting the element N^2 + 1 times. This can be reduced to 1: document.getElementById('itemSelect')
You're constantly getting arrayValues[i], which only needs to be done once.


Style


You should put spaces after commas: arg, arg2
You should put spaces before and after operations, for readability: var name = value
Spaces after semicolons: i &lt; length; i++


Rewrite

function loadItem(arrayValues, arrayNames) {
    var itemSelect = document.getElementById('itemSelect'),
        j = itemSelect.options.length;
    for(var i = 0, length = arrayValues.length; i &lt; length; i++) {
        let val = arrayValues[i];
        if(!existsElement(itemSelect, val)) {
            itemSelect.options[j] = new Option(val + " - " + arrayNames[i], val, null);
            j++;
        }
    }
}