How do I fill a dropdownlist on mouse event with jQuery?

Question

Lets say that I have a drop down list that I want to create "on the fly" when the user interacts with it.

For example: the drop down list only has the the option "Attach a file". When the user clicks/interacts on the drop down list, I need for it to generate, at that moment, all the available files they can attach (which depends on other interactions of the form... hence why I need an "on the fly" method).

My problem is trying to find the appropriate event as a trigger.

If I use onFocus, then IE tries to load the original drop down list and then generates the new drop down list, resulting in the user to essentially need to double click the drop down list to interact with it. In FF, there are no problems with this method.

I then tried switching to onMouseOver which works great in IE, but not so much in FF. The difference in the two is that in IE onMouseOver only triggers on the drop down box and not the drop down list and in FF it triggers on both (so you are trying to select an option from the list and it keeps re-generating the list on the fly, which is preventing you from interacting with it).

Any ideas? Thanks!

Answer 1

Have you tried onClick?

Also you should put some logic into the code that fills in the options. If nothing has changed on the page, then there is no need to refill the drop down list. So if you store the state of the page somehow, you can check if the new state is different from the old state, and then fill in the dropdown if it is.