如何以编程方式告诉HTML SELECT下拉(例如,由于鼠标悬停)？

//  element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
};


如果有人找到了相同但不在Chrome中的方法,请随时修改此小提琴.

        
它已在[Chrome 53+]上弃用(https://www.chromestatus.com/features/57188​​03933560832) 
不工作:`IE10`,`FF 24`.适用于:`Chrome 30`,`Safari 6.0.5`,`Opera 16` 
我希望我可以为此加上你的赏金.非常感谢. 
这次真是万分感谢!我需要在Chrome中精确模仿IE的ALT +向下箭头行为. 
@AdamTuttle它在Android 4.4.2上也不起作用 
不适用于Firefox和IE.怎么解决？ 
您应该更新答案，因为这在较新版本的浏览器中不起作用。 

2> Asim K T..：
Xavier Ho的答案是如何解决当前大多数浏览器中的问题.但是,"不再通过JavaScript发送/修改"事件是一种很好的做法.(就像mousedown在这种情况下)

从版本53+开始,Google Chrome 不会对不受信任的事件执行默认操作.例如由脚本创建或修改的事件,或通过dispatchEvent方法调度的事件.这个更改是为了与Firefox和IE对齐,我认为已经没有执行该操作.

出于测试目的,Fiddle提供Xavier的答案不适用于chrome 53+.(我不测试FF和IE).

参考链接:

https://www.chromestatus.com/features/57188​​03933560832 
https://www.chromestatus.com/features/6461137440735232

并且不推荐使用 initMouseEvent

        
这需要投票,因为它现在是正确的答案! 

3> CMS..：
这是我能得到的最接近的,更改onmouseover元素的大小,并恢复onmouseout的大小:



       
        1
        2
        3
        4
        5
      

select{
  opacity: 0;
  position: absolute;
}

  option 1
  option 2
  option 3

click

    Red
    Green
    Blue



Show dropdown items

var is_visible=false; 

$(document).ready(function(){

    $('#fire').click(function (e) { 
    var element = document.getElementById('dropdown');


    if(is_visible){is_visible=false; return;}
    is_visible = true;

    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);

    /* can be added for i.e. compatiblity.
      optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
    */
    e.stopPropagation();
    return false;
});


$(document).click(function(){is_visible=false; });
});