在更改时打开选择刷新 - chrome

Question

这在Firefox上可以正常工作,但在Chrome上却没有.

小提琴示例:http://jsfiddle.net/8Ab6c/1/

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

如果在超时完成时打开选择框,则在关闭并重新打开选择框之前,列表不会更新.有没有办法让它在Chrome 上仍然打开时更新选择列表？(我觉得IE太理想了,虽然这不是必需的)

我可以replaceWith用来强制它被取消选择,但这有一个难看的效果,我更喜欢它只是改变了列表并保持打开状态.

实际情况是我的选择框正在等待ajax调用,并且用户很容易在ajax完成之前打开选择框.

Answer 1

这有两个部分,你必须在更新它时模糊下拉菜单,然后重新打开它.拿走焦点很容易,重新打开列表不是.我使用这种技术/sf/answers/709556641/重新打开它.

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);

这是小提琴:http://jsfiddle.net/8Ab6c/2/