Optimizing large dynamic <select>
I'm building on-the-fly <select> lists from JSON data fetched from the server. Some of then include a large number of items (>20,000).
The SQL and HTML parts are working fine. The AJAX script fetches data fairly quickly (around 1 second) and large selects are not a problem once they're built (the browser handles them nicely, even IE). The bottleneck is in the process of picking the JSON data and building the <option> tags. That can take a full minute.
What's the recommended (i.e. fastest) method to generate a large <select> list?
My current approach is this:
-
// Fetch data (GET method allows me to use browser cache)
$.get(url, get, function(jsonValues, txtStatus){
that.values = jsonValues;
}, "json");
// Create <select>
var select = document.createElement("select");
$(select).attr("disabled", "disabled");
$("<option>").attr("value", "").text("Loading...").appendTo(select);
// Populate <select>
$(that.values).each(function(i){
if(this.c!==null){
$("<option>").attr("value", this.c).text(this.v).appendTo(select);
}else{
// Informative item, must not be selectable
$("<option>").attr("value", "").text(this.v).attr("disabled", "disabled").appendTo(select);
}
});
$(select).removeAttr("disabled");
$(select).find("option:first-child").text("");