Make the selected update while it opens when changing - chrome

Question

This works as expected in Firefox, but not in Chrome.

Sample script: http://jsfiddle.net/8Ab6c/1/

setTimeout(function(){ $('#s1').append("<option>NEW</option>"); },2000); 

If selectbox opens when the timeout ends, the list is not updated until selectbox is closed and reopened. Is there a way to update a selection list while it is still open in Chrome? (I think IE is too idealized, although not required)

I can use replaceWith to make it cancel the selection, but this has an ugly effect, and I would prefer it to just change the list and save it.

The actual situation is that my selection window is waiting for an ajax call, and it is pretty easy for the user to open the selection window before ajax is completed.

Answer 1

There are two parts to this, you must blur the drop-down menu when you refresh it, and then open it again. It's easy to remove focus, reopening the list is not. I used this method fooobar.com/questions/66522 / ... to reopen it.

 var showDropdown = function (element) { var event; event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown', true, true, window); element.dispatchEvent(event); }; setTimeout(function(){ var focused = false; if($('#s1').is(":focus")) { $('#s1').blur(); focused = true; } $('#s1').append("<option>NEW</option>"); if(focused) { showDropdown($('#s1')[0]); } },4000); 

Here is the fiddle: http://jsfiddle.net/8Ab6c/2/