Populate HTML dropdown onclick

Question

I have a page which contains multiple HTML select dropdowns, and requires population onclick of the element. This population is done using an AJAX call in the click event listener of the select elements.

The reason for this is that performance and load are very crucial, and therefore they cannot be populated on page load.

Also, the design must use the native HTML select element.

---

I have created a jsFiddle demo to show the issue. When you click on the select the items are populated, and the width of the select increases as a result.

However the select only displays the initial option (prior to AJAX population).

------ View Demo ------

Demo uses setTimeout() of 50 milliseconds to emulate an AJAX response time.

---

How can I get this to populate onclick, and display correctly?

Is there a way of opening the select on callback of the popualation response?

EDIT: Alternatively, is there a jQuery plugin dropdown, which uses the browser's native theme for styling?

---

What I've tried so far

• Populating the select on hover, however a quick user can open the select before the options have loaded. Also, if a user was to scroll all the way down the page, and over every select, this would cause a lot of unnecessary AJAX calls.
• Changing the event listener to focus instead of click (as @AndyPerlitch suggested). However, this wouldn't work if the AJAX request took only 50 milliseconds to respond. (See Demo)
• Changing the event listener to mousedown has the same effect as focus

---

UPDATE: This is not an issue in FireFox. select opens, then loads new items and displays them, all while in an open state.

Answer 1

Change the event to listen for from click to focus

Answer 2

Personally I would opt for a different approach completely, but it depends on you needs. Here I am assuming that the drop down will "almost definitely" be clicked (and thus loaded) at some point by the user.

With that in mind I would be tempted to populate the select lists using ajax as soon as the page is loaded. This has the benefit of being able to load the page quick (as there is still no "page load" list collecting) but it also means the ajax will most likely be complete before the user works out that they need to use the select list. I would even go an extra step and have temporary loading icons in place of the selected while the ajax is working it's magic (or disable them!) in case the ajax is having a slow day and the user is fast like superman.

of course, this all depends on how "set in stone" your requirement is to do the ajax load upon user interaction with the drop down element

---

or maybe this might prove some use?