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.

It seems to work for me in Chrome...Can you clarify what precisely your question is? — General_Twyckenham, Jul 31 '14 at 17:07
@General_Twyckenham if you run it and open the select immediately, you get the "NEW" entry after 2 seconds? — DanielST, Jul 31 '14 at 17:09
It also works for me in chrome too. What version of chrome and what OS are you having a problem with? — Kevin Lynch, Jul 31 '14 at 17:09
Oh, that's the clarification necessary. You want it to update WHILE the list is open/active. — General_Twyckenham, Jul 31 '14 at 17:10
@Vector and I'm on chrome 36.0.1985.125 on Scientific Linux (redhat) — DanielST, Jul 31 '14 at 17:14

score 7 · Accepted Answer · edited May 23 '17 at 11:59

7

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/

edited May 23 '17 at 11:59

Community

1
1

answered Jul 31 '14 at 17:20

Fireandlight27

716
5
9

2

This actually works in Chrome but does not in Firefox because the blur works in both but showDropdown only works in Chrome. – Fireandlight27 Jul 31 '14 at 17:30
1

huh, well the default behavior works on FF so I'll just do a check if it's FF. – DanielST Jul 31 '14 at 17:33
This works http://jsfiddle.net/Ta5j4/4/ . Not ideal but since all of the functions exist in FF (though they throw errors) I can't just check if they exist. – DanielST Jul 31 '14 at 17:54
Commenting to say this still works and you're a life saver! – Toby Caulk Mar 04 '16 at 16:11

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

1 Answers1