Question

I’m using javascript to duplicate a couple select lists and append them to another element in the DOM. One of these lists is very large: 29843 options. I’ve read a lot of tips on improving the performance of jQuery’s append method, including only appending once and using an array instead of concatenating. I think the code below doesn’t violate any of these practices, but when I call the append method, the browser (even Chrome) hangs.

var rows = $('.runRow');
var envOpts = rows[0].children[1].children[0].innerHTML;  // contains 3 <option> tags
var sumOpts = rows[0].children[2].children[0].innerHTML;  // contains 29843 <option> tags

var newRow = "<span class=\"runRow\">";
newRow += "<span>Run " + (numRuns++) + "</span>";

newRow += "<span><select id=\"Environment" + numRuns + "\" name=\"Environment" + numRuns + "\">";
newRow += envOpts;
newRow += "</select></span>";

newRow += "<span><select id=\"SummaryID" + numRuns + "\" name=\"SummaryID" + numRuns + "\">";
newRow += sumOpts;
newRow += "</select></span>";

newRow += "</span>";

$('#RunsTable').append(newRow);

Am I asking too much of javascript, or is there a way to perform this operation?

Thanks!

Answer 1

You are asking too much. Not necessarily of jQuery, though, or even JavaScript. As James Montagne’s comment suggests, your (ab)use of the idea of a dropdown menu might be outide the bounds of what the operating system/windowing framework performs well with.

Have you considered a hierarchical approach, with the 30k options categorized and then presented to the user as a list of dropdowns?