Dropdown Population with Jquery Ajax & CFC

Question

I'm trying to populate a HTML dropdown with database data. To do so, I'm retrieving data from database and creating option elements as below:

var obj = eval("(" + data + ")");
for (i = 1; i <= obj.DATA.length; i++) {
    var col_val = obj.DATA[i - 1];
    $("#dropdown").append('<option value="' + col_val + '">' + col_val + '</option>');
}

I tried an alternate method also as below:

$("#dropdown").html(data);

where, data is a string containing a list of option elements returned by the called CFC page after looping over the database query using cfloop.

Before adding the new options, I'm removing the older ones using either of the below statements.

$('#dropdown').empty(); 

$('#dropdown option').remove();

$('#dropdown').html('');

After analysis, I found that removing options is causing the maximum delay.

Is there any faster alternate JavaScript or Jquery function that can be used for removing options? OR Do you suggest any work-around to improve the performance?

Note: I have to use ColdFusion & AJAX for this purpose. Also I can't use the Built-in AJAX Functionality of ColdFusion.

Thanks!!

Answer 1

I usually return html from the ajax request so the response looks like

<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
...

then just use $("#selectName").html(data); to populate the select with the response which now contains a bunch of option tags.