Curt Curt - 5 months ago 18
jQuery Question

Populate HTML dropdown onclick

I have a page which contains multiple HTML

dropdowns, and requires population
of the element. This population is done using an AJAX call in the click event listener of the

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

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

enter image description here

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

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

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

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

Is there a way of opening the
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
    on hover, however a quick user can open the
    before the options have loaded. Also, if a user was to scroll all the way down the page, and over every
    , this would cause a lot of unnecessary AJAX calls.

  • Changing the event listener to
    instead of
    (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
    has the same effect as

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


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?