Is it possible to populate a SELECT dropdown when clicking on it?

Question

I'd like to have a bunch of SELECT dropdown lists on my page which can be empty initially. When the user clicks on one of them, I want an AJAX call to be made to the server to get the desired list for the chosen dropdown. The results of this AJAX call are then put inside the dropdown and the dropdown then works as normal.

Is this possible to delay showing the dropdown list expanded until the AJAX call is complete? I have currently binded an event to the Focus event of each SELECT dropdown and that almost works, except the user is shown the empty list first. When they click away, the list then is populated with the results and works correctly from then on.

Ideally, I'd like it to say "loading..." when clicking on it, then replace this with the results without the user having to click away and then back again. Not sure if this is possible though.

I don't mind moving to a jQuery dropdown as opposed to the standard HTML SELECT in order to make this work.

Answer 1

I think you have 2 options - 1 - make sure you fire the event after the AJAX call is complete, or fire the code that the event would call after the AJAX call is complete, or 2 - paut a setTimeout in the event and estimate the time it will take to make the call.

Answer 2

you can also cheat: onclick , substitute the options with one that just says "Loading..." and let it display normally. Then, when you have the correct data, you put it in the select and make it display the dropdown list again triggering the click event if necessary.

Does that make sense?

Answer 3

Is this possible to delay showing the dropdown list expanded until the AJAX call is complete?

No. You don't get control over the internal behaviour of selects. Most browsers won't let you trigger an open click programmatically.

Consider using a faux-select made out of divs instead.