jQuery Forum

I have an interface where users can add new rows of input fields.

In each row there is a select drop down that contains about 1600 option items.

When adding rows the interface becomes progressively slower due to the amount of stuff in the DOM.

I have come up with a solution that is sort of working. That is, to have the options of a select populated when the user mousedowns on that particular one:

[code]
$.post('core/main-control.php', {mode:'FETCH_SUPPLIERS_SELECT'}, function(data){

$('select#supplierSelect'+target).children('option:not:(option:selected)').remove() ;

$('select#supplierSelect'+target).html(data) ;

})

[/code]

The problem is that on the first click the select only has two options, a blank one and one with a value. When clicking again it works as desired and all the options are there.

I want it to populate all options when the list is opened.

Does anyone know how I can get this to work as I want?