Highlight HTML onclick dropdown

Question

I have a page that contains several HTML select dropdown menus, and this requires a population of onclick elements. This collection is performed using an AJAX call in the click event listener of the select elements.

The reason for this is that performance and loading are very important, and therefore they cannot be filled when the page loads.

In addition, the design must use its own HTML select element.

---

I created a jsFiddle demo to show the problem. When you click on select , the elements fill up, and as a result, the width of the select increases.

However, select only displays the initial option (before the AJAX population).

------ Open the demo ------

The demo uses setTimeout() in 50 milliseconds to emulate the AJAX response time.

---

How can I get this to fill in onclick and render correctly?

Is there a way to open select when popualation response callback?

EDIT: Alternatively, is there a drop-down list of jQuery plugins that uses the browser’s native theme for styling?

---

What have i tried so far

• Filling select when hovering, however a fast user can open select before loading parameters. Also, if the user has to scroll all the way down the page and through every select , this will cause many unnecessary AJAX calls.
• Changing the event listener to focus instead of click (as suggested by @AndyPerlitch ). However, this will not work if the AJAX request takes only 50 milliseconds. ( See demo )
• Changing the event listener to mousedown has the same effect as focus

---

UPDATE: This is not a problem in FireFox. select opens, then loads the new elements and displays them, all in the open state.

Answer 1

Personally, I would choose a completely different approach, but it depends on your needs. Here, I assume that at some point the user can click (and thus download) at some point, "almost definitely".

With that in mind, I would want to populate select lists using ajax as soon as the page loads. This makes it possible to quickly load the page (since the collection of the "page load" list is still missing), but it also means that ajax will most likely be completed before the user finds out that they need to use the select list. I would even take an extra step and have temporary download icons instead of the ones selected, while ajax works with magic (or disables them!) In case ajax has a slow day and the user is fast as a superman.

Of course, it all depends on how to "set in stone" your requirement - to make ajax load when the user interacts with the drop-down element

---

or maybe this may seem useful ?

Answer 2

Change the event to listen from click to focus

Answer 3

The selection will always be displayed as it was before the start of the click event. Thus, you will see only the initial option, since after the start of the click you get the AJAX population.

This may be a compromise for you, but try populating AJAX before the click event. It can be: - move the cursor, as you have already done (the user must scroll the click in any case) - an additional click for your users on the element adjacent to the selection

Answer 4

Hide the drop-down list and try something else in its place so that the user clicks a button to cause the drop-down list to load and display.