Question

I have a select box that should be populated only when clicked. The query involved takes a long time so I’m deattaching it from the standard data shown on the page.

I have implemented the function loadMyData(element, id) which does an ajax request and returns the data as JSON. Then it populates the select box.

the event is binded to the element as this:

<select onclick="loadMyData(this, 1)">
</select>

and the select box is populated as this:

$.each(data, function(index, optionData) {
  select.options[element.options.length] 
             = new Option(optionData.Text, optionData.Value);
});

On Gecko-based browsers works, but on Webkit ones (safari and chrome), when I click the select box, an empty drop-down box is shown before the ajax request and after the response, the drop-down box is not refreshed. One have to click outside the select box and click it again in order to see the updated “options”.

Is there any way to force it to refresh the contents? or to simply automatically select first one and hide the drop-down box?

**tried onfocus and found the same results. onmouseover works but is “not usable”. onchange is not viable due select box is empty at its initial state.*

Answer 1

Some ideas:

1. Don’t use standard html select boxes – your application doesn’t degrade gracefully eitherway.

2. Use some clickjacking – have a transparent div OVER selet box – problems with IE

3. Use a checbox to allow “non standard” answer, which would populate the select box and make it clickable (not disabled)

4. My favourite: cache query results and populate the select box right away. Give another “referesh options” button near the select box to reload options thru AJAX.