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

Question

这在 Firefox 上可以正常工作，但在 Chrome 上却不行。

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

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

如果选择框在超时结束时打开，则列表不会更新，直到您关闭并重新打开选择框。有没有办法让它在 Chrome 上更新选择列表仍然打开？ （我猜在 IE 上太理想了，虽然这不是必需的）

我可以使用replaceWith 强制取消选择它，但这会产生丑陋的效果，我希望它只是更改列表并保持打开状态。

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

Answer 1

这有两个部分，您必须在更新下拉菜单时模糊它然后重新打开它。转移焦点很容易，重新打开列表则不然。我使用这种技术https://stackoverflow.com/a/10136523/436036 重新打开它。

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/