Make a select refresh while it's open when changed - chrome

Question

This works as expected on Firefox but not on Chrome.

Fiddle example: http://jsfiddle.net/8Ab6c/1/

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

If the selectbox is opened when the timeout finishes, the list isn't updated until you close and reopen the selectbox. Is there a way to make it update the select list while it's still open on Chrome? (I guess on IE too idealy, though that's not required)

I can use replaceWith to force it to be deselected but this has an ugly effect and I'd prefer if it just changed the list and kept it open.

The actual situation is that my select box is waiting on an ajax call and it's quite easy for the user to open the select box before the ajax is finished.

Answer 1

There are two pieces to this, you have to blur the drop-down when you update it and then reopen it. Taking away focus is easy, reopening the list is not. I used this technique https://stackoverflow.com/a/10136523/436036 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/